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";

    }

}