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