CSS SASS基础知识

1 文档注释：

在SASS/SCSS文件中可以使用两种注释方式：

(1) /*...*/,多行注释，且注释将出现在编译后的CSS文件中；

(2) //, 单行注释，注释将不会出现在编译后的CSS文件中。

2 特殊符号

&符，可以引用父级选择符。

$符，变量名以$符号开始，变量具有作用域范围。

!default，可以为变量指定默认值。

#{$varname}， 变量替换

使用SASS的主要目的是简化CSS的开发与维护，其中SASS提供的规则嵌套，变量定义等写法正好帮助开发者实现了此目的。

1 变量的定义

$myFavoriteColor: #123456;

 2 混合器 @mixin  @include

@mixin border {    border: 1px solid #eee;}.test-div {    @include border;}

3 带参数的混合器

@mixin border-radius($radius: 5px){    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    -ms-border-radius: $radius;    border-radius: $radius;}.test-div {   @include border-radius;}.text-div {   @include border-radius(8px);}

4 扩展继承 @extend

.head {    border: 1px solid #eee;}.foot {    @extend .head;}

5 规则嵌套

.head {    h2 {        font: bold 18px 微软雅黑;    }    > p {        a {            &:hover{                color: #eee;            }        }    }        }

6 运算

$singleMargin: 5px;$doubleMargin: $singleMargin * 2;

7 内置函数

color: lighten(#369, 20%);color: saturate(#369, 20%);color: desaturate(#369, 20%);color: adjust-hue(#369, 180);color: grayscale(#369);color: mix(#369, #963);

常用函数：

lighten(#369, 20%);

darken(#369, 20%);

saturate(#369, 30%);

desaturate(#369, 100%);

adjust-hue(#369, 180);

color: mix(#336699, #993266);

compelment(#369);

transparentize(#369, .5);

fade-out();

opacify(#369, .3);

fade-in(#369, .3);

grayscale(#369);

adjust-color();

scale-color();

shade();

tint();

常用指令

导入指令：@import

导入：@import "file-name"

在导入时，如果不想被导入的文件生成相应的CSS文件，可以将被导入的文件命名是在文件名前加下划线“_”。而导入命令后面的文件名为不加下划线的文件名。

扩展指令：@extend

.checkout_button {

    @extend .blue_button;

    color: darken(#369, 10%);    //覆盖

}

Placeholder 选择符：%

    SASS支持一种称为“placeholder selector”的特殊选择符类型。该类型与class和id选择符类似，只是将“.”和“#”换成了“%”。它主要用于与@extend指令配合使用，除此之外，针对该选择符的样式规则不会被转换成相应的CSS规则。

@mixin，@include指令

@mixin blue_text($size: 20px){

    color: #369;

    font-size: $size;

}

.product_title {

    @include blue_text;

}

.product_title {

    @include blue_text(100px);

}

@each 指令

@each $member in thom, jonny, colin, phil {

    .#{$member}_picture {

        background-image: url("/image/#{$member}.jpg");

    }

}

@if与@else指令

@mixin country_color($country){

    @if $country == france {

        color: blue;

    }

    @else if $country == spain {

        color: yellow;

    }

    @else {

        color: red;

    }

}

.france {

    @include country_color(france);

}

@media指令