SCSS

[wedaren]

context
CSS 规则由选择符和声明两部分组成，选择符用于指出规则所要选择的元素，声明则又由两部分组成:属性和值，属性指出要影响元素哪方面的样式，值就是属性的一个状态。《CSS设计指南》

变量（Variables）

变量作用域，类似es没有块级作用域，只有全局作用域，和局部作用域，也就是最外层的选择器。添变量添加 !default，会导致变量提升。

值的类型(Type)

• 数字，1, 2, 13, 10px；
• 字符串，有引号字符串或无引号字符串，"foo", 'bar', baz；
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)；
• 布尔型，true, false；
• 空值，null；
• 值列表，用空格或者逗号分开，1.5em 1em 0 2em, Helvetica, Arial, sans-serif;

值列表 (Lists)

margin: 10px 15px 0 0

#{ }插值语句 (interpolation)
生成不是值的字符串

$foo: header
#main{
    #{foo}:{
        margin: 10px 5px;
    }
}

运算符 (Operations)

• 运算+, -, *, /, %
• 关系运算符 <, >, <=, >=
• 相等运算符 ==, !=

嵌套（Nesting）

选择器嵌套

ul {
    li {}
}

属性嵌套

font {
    weight : bold;
    size: 3em;
}

用&代表父选择器

a{
     &:hover
}

混合（Mixins）

类似function，用@mixin申明，可以有默认值参数，用@include调用。

用@mixin申明

@mixin foo {
    /*样式规则*/
}

有默认值参数

@mixin bar（$var：boo）{
    /*样式规则*/
}

用@include调用

选择器{
    @include(foo)；
}

选择器继承

类似函数继承，可以继承CSS 规则，可以%定义SCSS识别的规则，@extend调用。
（CSS 规则由选择 和声明两部分组成）

CSS规则

.block {
    margin: 10px 5px;
    padding:2px;
}

@extend调用

p {
    @extend .block;/*继承.block选择器下所有样式*/
    border: 1px solid #eee;
}

定义SCSS识别的规则

%block {
    margin: 10px 5px;
    padding: 2px;
}

[wedaren]

SASS基础——十个常见的Mixins
inline-block
水平居中
浮动与重置浮动
清除浮动clearfix
图片替代文本
隐藏元素
截取文本text-overflow
透明度opacity
禁用样式disabled
最小高度min-height

[wedaren]

Sass中半透明颜色的Mixins
opacity影响元素的透明度
颜色的半透明rgba和hsla属性
SCSS颜色函数

[wedaren]

CSS的长度单位

绝对长度单位

px

相对字体的长度

Em

相对于父元素的的font-size，1em等于父元素的font-size大小（换句话说，em是父元素的font-size的引用，0.5em=font-size*0.5）
CSS中强大的EM
Sass基础——PX to EM Mixin和@function

rem

相对于root，更少bug

可视区百分比长度单位

vw，vh
vmin的值是当前vw和vh中较小的值