sass学习笔记

css功能扩展

嵌套规则

sass允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器

#main p{
    color: #00ff00;
    width: 97%;
    .redbox {
        background-color: #ff0000;
        color: #000000;
    }
}

父选择器&

可以用&代表嵌套规则外层的父选择器

a {
    font-weight: bold;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

&必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

#main {
    color: black;
    &-sidebar {
        border: 1px solid;
    }
}

属性嵌套

有些css属性遵循相同的命名空间，比如font-size, font-family等，为了便于管理这样的属性，sass允许将属性嵌套在命名空间

sassScript

变量

sassScript最普遍的用法就是变量，变量以美元符号开头，赋值方法与css属性的写法一样：

$width: 5em;
#main { 
    width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

#main {
    $width: 5em !global;
    width: $width;
}
#sidebar {
    width: $width;
}

数据类型

SassScript支持以下的数据类型：

• 数字， 1，2，10
• 字符串， 有引号字符串与无引号字符串，“foo”， “bar”, “baz”
• 颜色， blue, #04a3f9
• 布尔型， true, false
• 空值，null
• 数组（list), 用空格或逗号作分隔符，1.5em 1em 0 2em, Helcetica, Arial, sans-serif
• maps，相当于js中的object, （key1: value1, key2: value2)

字符串

sassscript支持有引号字符串和无引号字符串，编译css文件不会改变其类型，只有一种情况例外，使用#{}时，有引号字符串将被编译为无引号字符串，这样便于mixin中引用选择器名

@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
    }
}

@include firefox-message(".header");

编译成

body.firefox .header:before {
    content: "Hi, Firefox users!";
}

插值语句

通过#{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
    #{$attr}-color: blue;
}

变量定义！default

可以在变量的结尾添加!default给一个未通过！default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
    content: $content;
    new-content: $new_content;
}

编译为

#main {
    content: "First content";
    new-content: "First time reference";
}

变量是null空值时将视为未被！default赋值

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

编译为

#main {
  content: "Non-null content"; }

@import

通常@import寻找sass文件并将其导入，在以下情况下，@import仅作为普通的css语句，不会导入任何sass文件。

• 文件扩展名是.css
• 文件名以http://开头
• 文件名是url()
• @import包含media queries

@media

sassscript中允许在css规则中嵌套。如果@media嵌套在css规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器

.sidebar {
    width: 300px;
    @media screen and (orientation: landscape) {
        width: 500px;
    }
}

编译为

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
    .slidebar {
        width: 500px;
    }
}

@extend

@extend可以将一个选择器下的所有样式继承给另一个选择器

.error {
    border: 1px #f00;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

这样就会将error下的所有样式继承给seriousError

@extend-Only选择器

sass引入了"占位符选择器",计作%，当它们单独使用时，不会被编译到css文件中，定这套样式并不是给某个元素用，而是只通过@extend指令使用。

// 这条规则在单独使用的时候并不会被编译到css中
#content a%extreme {
    color: blue;
}

.notice {
    @extend %extreme;
}

编译成

#content a.notice {
    color: blue;
}

在指令中延伸

在指令中使用@extend时有一些限制，sass不可以将@media层外的css规则延伸给指令层内的css，这样会生成大量的无用代码。如下面例子是可行的：

@media print {
    .error {
        border: 1px #f00;
        background-color: #fdd; 
    }
    .seriousError {
        @extend .error;
        border-width: 3px;
    }
}

但不可以这样：

.error {
    border: 1px #f00;
    background-color: #fdd;
}
@media print {
    .seriousError {
        @extend .error;
        border-width; 3px;
    }
}

控制指令

@if

当@if的表达式返回值不是false或者null时，条件成立，输出{} 内的代码：

p {
    @if 1 + 1 == 2 {border: 1px solid; }
    @if 5 < 3 {border: 2px dotted;}
    @if null {border: 3px double;}
}

编译为
p { border; 1px solid;}
与别的语言相同的，也有else if和 if这些这里不过多说明

@for

这个指令包含两种格式：
@for $var from <start> through <end>
@for $var from <start> to <end>

@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

编译为

.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

@each

遍历数组，@each指令的格式是$var in <list>

@each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}

@while

@while指令重复输出格式直到表达式返回结果为false，这样可实现比@for更复杂的循环，只是很少会用到

$i: 6;
@while $i > 0 {
    .item-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}

混合指令

混合指令（mixin)用于定义可重复使用的样式，避免了使用无语意的class

定义混合指令

混合指令的用法是在@mixin后添加名称与样式

@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

引用混合样式@include

使用@include指令引用混合样式，格式是在其后添加混合名称，以及需要的参数

.page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
}

混合样式中也可以包含其他混合样式

@mixin compound {
    @include highlighted-background;
    @include header-text;
}
@mixin highlighted-background {
    background-color: #fc0;
}
@mixin header-text {
    font-size: 20px;
}

参数

参数用于给混合指令中的样式设定变量，并且赋值使用

@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
p{ @include sexy-border(blue, lin) }

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值

@mixin sexy-border($color, $width: 1in) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
p {@include sexy-border(blue)}
h1 {@icnlude sexy-border(blue, 2in)}

参数变量

如果不能确定混合指令需要使用多少个参数，可以使用参数变量…声明

@mixin box-shadow($shadow...) {
    box-shadow: $shadow;
}
.shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为

.shadowed {
    box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

函数指令

sass支持自定义函数，并能在任何属性值或者sassscript中使用

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！