css预处理器less和scss之sass介绍（二）

本来打算整理jQuery Mobile来着，但是没有研究明白，所以接着上个周的继续介绍。。。

【scss中的基础语法】

1.scss中的变量
①声明变量：$变量名:变量值

$width:100px;

$position : left;

#div1{

    width: $width;

    height: $width;

    background-color: red;

    border-#{$position}: 10px solid yellow;

}

scss中，允许将变量嵌套在字符串中，但是变量必须使用井号包裹
2.scss中的运算，会将单位进行运算，使用时注意最终的单位是否正确，
3.scss中的嵌套:选择器嵌套、属性嵌套、伪类嵌套
①选择器嵌套ul{li{}}
嵌套默认后代选择器，如果需要子代选择器，则需加大于号
可以在选择器的大括号中使用and表示上一层的选择器。
②伪类嵌套 li{&:hover()}
在选择器{}中配合&使用伪类事件，可以表示当前选择器的

font:{

                    size: 16px;

                    weight:bold;

                    family:"微软雅黑";

                    style:"italic";

                };

对于属性名有分割为多段的属性，可以使用属性嵌套，属性名的前半部分必须紧跟，才能用()包裹属性的后半部分。
4.混合宏、继承、占位符
①混合宏使用 @mixin 声明混合宏，在其他选择器中使用 @include调用混合宏、
声明时可以有参数可以无参数，参数可以有默认值也可以咩有默认值，但是调用时，必须符合声明时的要求，与less中的混合相同。
优点，可以传参，不会产生同名的class
缺点，调用时会把混合宏中的所有代码copy到选择器中，产生大量冗余代码

例如

@mixin hunhe($color:green){

    color: $color;

}

.class3{

    @include hunhe;

    background-color: yellow;

}

.class4{

    @include hunhe;

    background-color: blue;

}

②继承声明一个普通的class，在其他选择器中使用@extend集成这个class
class1{} .class2(@extend.class1;)
优点，将相同的代码，提取到并集选择器，减少冗余代码
缺点，不能传入参数，生成多余的class

例如

.calss1{

    color: wheat;

}

.class{

    @extend .calss1;

}

③占位符使用%声明占位符，在其他选择器中使用@expend继承占位符；
优点，将相同的代码，提取到并集选择器，减少冗余代码
不会产产生一个多余的class
缺点不能传参

例如

%class1{

    color: wheat;

}

.class4{

    @extend .calss1;

    background-color: yellow;

}

.class5{

    @extend .calss1;

    background-color: green;

}

5.if条件结构
条件结构的大括号要写在选择器里面，条件结构的大括号直接包裹样式属性
@if条件{}
@else{}

例如

.class6{

    width: 100px;

    height: 100px;

    @if >{

        background-color: yellow;

    }

    @else{

        background-color: blue;

    }   

}

$i : ;

@while $i<{

    .while-#{$i}{

        border: #{$i}px soild red;

    }

    $i : $i + ;

}

//

@for $i from  through  {

  .item-#{$i} { width: 2em * $i; }

}

6.for循环

@for $i from 1 to 10{}//不包含10
@for $i from 1 through10{}//包含10

例如

@for $i from  through  {

  .item-#{$i} { width: 2em * $i; }

}

7.@while循环
$i : 0
@while $i<10{
$i : $i + 1;
}

.class6{

    width: 100px;

    height: 100px;

    @if >{

        background-color: yellow;

    }

    @else{

        background-color: blue;

    }   

}

$i : ;

@while $i<{

    .while-#{$i}{

        border: #{$i}px soild red;

    }

    $i : $i + ;

}

//

@for $i from  through  {

  .item-#{$i} { width: 2em * $i; }

}

8.@each循环遍历
@each $item in a,b,c,d{
//$item表示a,b,c,d每一项
}

@each $item in c1,c2,c3,c4{

    $i : $i + ;

    .#{$item}{

        border: #{$i}px soild red;

    }

}

@function func($num){

    @return $num*;

}

.functest{

    width: func(10px);

}

本人不是技术大神，写不出多么多么复杂的代码，但我会努力的！谢谢大家抽时间来看，希望对新手有所帮助~

巴特西

css预处理器less和scss之sass介绍（二）

最新文章

热门文章