阅读 22

sass学习笔记分享

1.安装:
GFW拦了,Ruby可能装不了
先清除原Ruby源,然后切换到淘宝源
gem sources --remove rubygems.org/
gem sources -a ruby.taobao.org/
gem install sass (有可能权限不够,那就sudo)
国际惯例 -v查版本,看是否安装成功。

2.两种后缀
.scss和.sass
两者的区别在于
.sass是一开始用的语法后缀,缩进式,靠缩进区分代码块,类似Python(比较老)
.scss是v3.0后的新语法后缀,Sassy CSS,更贴合css的语法,靠{}区分代码块(更常用,优选)
exp:

sass:/ * 多行注释    只要缩进就代表继续    直到不缩进了,注释结束
// 单行注释也是这样   只要缩进就是继续
@import reset=des   color: #777   font-size: 12px.new-content   +desul   list-style: none   li       margin: 0scss:/* 跟css多行注释一样   前后都需要星号*标记 */
// 单行注释也跟css一样// 每行注释都需要“//”
@iixin des {    mport “reset”;@mcolor: #777;    font-size: 12px;}.new-content {    @include des;}ul {    list-style: none;    li {        margin:0;    }}复制代码


3.编译sass
sass 1.scss:1.css

4.自动编译
sass —watch 1.scss:1.css
也可以自动编译整个目录
sass —watch scss目录:css目录

5.编译有四种格式
nested:嵌套(缺省值,编译后的同样按照嵌套缩进)
compact:紧凑(所有声明变成单行模式)
expanded:扩展(变成易读模式,美化后的规范格式,一个声明一行)
compressed:压缩(去掉不必要的空格和换行变成压缩模式.min)

sass —watch scss:css —style 格式
exp:sass —watch scss:css —style compact

6.变量
$light-color: #fff;
$light-border: 1px solid $light-color;
-和_虽然可以混合使用($light-color == $light_color),但最好还是统一

7.嵌套
.nav {
    margin: 0;
    padding: 0;
    ul {
        list-style: none;
            li {
                font-size: 16px;
                font-weight: bold;
                color: #777;
            }
       }
}

8.嵌套时调用父选择器用&
.nav {
    margin: 0;
    li {
        list-style: none;
            a {
                font-size: 16px;
                &:hover {
                    color: #fff;
                }
            }
    }
    & &-item {
        border: 1px solid #ddd;
    }  
}

9.属性嵌套
.des {
    font-size: 15px;
    font-weight: bold;
    font-family: "Microsoft YaHei";
    border: 1px solid #f60;
    border-left: none;
    border-right: 0;
}
.des {
    font: {
        size: 15px;
        weight: bold;
        family: "Microsoft YaHei”;
    }
    border: 1px solid #f60 {
        left: none;
        right: 0;
    }
}

10.@mixin(混合:定义好的可带参数的样式模块)
@mixin content {
    font-size: 16px;
    .title {
        color: #777;
    }
    .des {
        font-size: 12px;
    }
}

.news-content {
    @include content;
    color: #f60;
}

@mixin content($des-size:16px, $title-color:#666) {
    font-size: 16px;
    .title {
        color: $title-color;
    }
    .des {
        font-size: $des-size;
    }
}
.news-content {
    @include content();
    color: #f60;
}
.news-content {
    @include content(14px, #ddd);
    color: #f60;
}
.news-content {
    @include content($title-color:#777,$des-size:12px );
    color: #f60;
}

11.@extend (继承 or 扩展)
.des {
    font-size: 14px;
}
.des a {
    color: blue;
}
.content {
    @extend .des;
    color: #ddd;  
    .title {
        font-size: 20px;
    }
}

12.@import Partials
_reset.scss (partials的文件名要以_下划线开头,这样会认为该文件为partials,就不会单独的去编译它)
body {
    margin: 0;
    padding: 0;
}

1.scss
@import "reset"
……


13.注释
/*
* 多行注释
* 与css的一样
* 会在编译输出的css里出现
* 但不会出现在压缩模式下编译输出的css里
*/

// 单行注释与css的也一样,不会出现在编译输出的css里

/*!
* 强制注释
* 就是多行注释内容第一个字符以 ! 开头
* 会一直在编译输出的css里出现
*/

14.数据类型
函数:type-of()
有数字类型、字符串类型、列表类型、颜色类型

15.数字类型
可进行数学运算
但注意:1.乘法如果每个乘数都有单位,那结果将带有多个单位,所以请保证只有一个乘数有单位。
2.除法符号 / 因为在css中冲突,所以用 ( ) 将除法运算包起来
3.除法如果被除数和除数带有相同的单位,则结果的单位会被抵消。

16.数字函数
abs() 绝对值(有单位带单位,无单位就是纯数字)
round() 四舍五入
ceil() 进位取整 ceil(5.1) // return 6
floor() 退位取整 floor(6.9) // return 6
percentage() 变成百分数 percentage(65px / 100px) // return 65%(请把单位抵消,或者都不带单位,否则报错)
min(1,2,3,5) // return 1
max(2,10,5,6) // return 10

17.字符串
"字符串类型"
""+abc = "abc"
123 + "abc" = "123abc"
mao-123 = "mao-123"
123/mao = "123/mao"
mao*123(报错,字符串相乘是没有意义的)

18.字符串函数
$str : "Hello"
to-upper-case($str) // 全部大写
to-lower-case($str) // 全部小写
str-length($str) // 返回字符串长度
str-index($str, "H") // 返回指定字符串的索引,从1开始计算
str-insert($str, "要插入的字符串内容", 要插入的起始位置索引,从1开始算)


19.颜色
16进制:#ff0000,#f00
rgb(255, 0, 0)
hsl(0, 100%, 50%) //色相、饱和度、明度

20.rgb & rgba
red green blue
red green blue alpha(不透明度 0 - 1,0完全透明,1完全不透明)

21.hsl & hsla
hue 色相 0 - 360°
s 饱和度 0 - 100
l 明度 0 - 100%
alpha(不透明度 0 - 1,0完全透明,1完全不透明)

22.颜色函数 adjust-hue()
调整色相
$hex-color: #f00
$hsl-color: hsl(0, 100, 50%)
background-color: adjust-hue($hex-color, 120deg) // deg角度,可加可不加
background-color: adjust-hue($hsl-color, -120deg) // 可以是负数角度

23.颜色函数 lighten() 和 darken()(更亮和更暗)
$color: #def
lighten($color, 30%) // 提高30%明度
darken($color, 20%) // 降低20%明度

24.颜色函数 saturate() 和 desaturated()
$color: #cde
saturate($color, 50%) // 增加50%饱和度
desaturated($color, 20%) // 减少20%饱和度

25.颜色函数 opacify() 和 transparentize()
$color: hsla(120, 100%, 50%, .5);
opacify($color, .3) // 增加0.3不透明度 更不透明
transparentize($color, .2) // 减少0.2不透明度 更透明

26.List类型 列表类型
1px solid #ddd
0 auto
5px 3px 6px 5px

27.列表函数
$list:5px 10px 4px 8px;
$list2: 111px 222px;
length() // return 列表项数 length($list) return 4
nth() // return 列表指定项 nth($list, 3) return 4px
index() // return 指定列表项的索引 index($list, 4px) return 3
append() // return 追加列表项 append($list, 6px, auto) return 5px 10px 4px 8px 6px
第三个参数可选comma space auto
join() // return列表合并 join($list, $list2, comma) return 5px,10px,4px,8px,111px,222px
第三个参数可选comma space auto

28.Map类型 键值对
$map:(key1: val1, key2: val2);
$map2:(key3: val3, key4: val4);
$map3:(key1: val1, key2: val2, key3: val3, key4: val4)
29.Map函数
length() // return Map的键值对数量 length($map) return 2
map-get($map, key2) // return Map中指定键的值 return val2
map-keys($map) // return Map中的所有键 return (“key1", “key2")
map-values($map) // return Map中的所有值 return (val1, val2)
map-has-key($map, key1) // return Map中是否存在指定键 return true
map-merge($map, $map2) // return Map合并 return (key1: val1, key2: val2, key3: val3, key4: val4)
map-remove($map, key2, key1) // return 去掉了指定项的Map return (key3: val3, key4: val4)

29.boolean 布尔值
5px > 10px // return false;
8px > 2px // return true;
>, <, <=, >=, ==
and, or, not
(5px > 3px) and (3px < 6px) // return true
(5px < 3px) or (3px < 6px) // return true
not (3px < 6px) // return false

30.Interpolation
变量模板用法 #{变量}
$ver: "1.0.0";
/* 项目当前版本是 #{$ver} */

31.@if 判断
@if 条件 {
    ……
}@else if 条件2 {
    ……
}@else {
    …… 
}

32.@for 循环
@for $var from <开始值> through/to <结束值> {

} // through 包含结束值,to不包含结束值

$j: 5;
@for $i from 1 through $j {
    .col-#{$i} {
        width: 100% / $j * $i;
    }
} // 到5结束

@for $i from 1 to $j {
    .col-#{$i} {
        width: 100% / $j * $i;
    }
} // 到4结束


33.@each 遍历
@each $var in $list {
     ……
}

$status: success error warning;

@each $i in $status {
    .icon-#{$i} {
        background-image: url(../images/status/#{$i}.png);
    }
}


34.@while
@while 条件 {
    ……
}

$i: 10;
@while $i > 0 {
    .menu-item#{$i} {
        width: 2px * $i;
    }
    $i: $i - 2;
}

35.@function 函数
@function 名字 (参数1, 参数2) {
……
}

$fontsize: (big: 24px, small: 12px);
@function size($map, $key) {
    @return map-get($map, $key);
}

size($fontsize, big);


36.警告信息 error warning
@function size($map, $key) {
    @if map-has-key($map, $key) {
        @return map-get($map, $key);
    } @else {
        @warn "在 $map 中没有找到 #{$key} 这个key";
    }
}

@function size($map, $key) {
    @if map-has-key($map, $key) {
        @return map-get($map, $key);
    } @else {
        @error "在 $map 中没有找到 #{$key} 这个key";
    }