A今天學(xué)了什么

1.配置webstorm的安裝環(huán)境

2.sass的語法

a.變量

$bg:pink;
.header{background:$bg};
$place:top;

如果變量需要鑲嵌在字符串之中，就必須寫在#{ }之中。

.header{
margin-#{$place}:20px;
}

3.計算功能

body{
margin:(14px/2);
top:50px+100px;
right:$var*10%;
}

4.嵌套

div h{
color:red;
}
可以改寫為
div{
    hi{
   color:red;
   }
}

5.代碼重用

繼承@extend

//SASS允許一個選擇器，繼承另一個選擇器。比如

class1:
.class1{
border:1px solid #ddd;
}

.class2{
@extend .class1;
font-sizi:120%;
}

6.Mixin 是可以重用的代碼塊

比如：
@mixin left{ 
float:left;
margin-left:10px;
}

div{
@include left;
}

//mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。

@mixin left($value:10px){
float:left;
margin-right:$value;
}
div{
@include left(20px);
}

//可以傳遞多個參數(shù)

@mixin wh($w:100px,$h:100px){
width:$w;
height:$h;
}
div{
@include wh(200px,200px);
}

7.插入文件

@import命令，用來插入外部文件
@import"path/filename.scss";

如果插入的是.css文件，則等同于css的import命令。
@import"foo.css";

B我掌握好的地方

4.嵌套

div h{
color:red;
}
可以改寫為
div{
    hi{
   color:red;
   }
}

5.代碼重用

繼承@extend

//SASS允許一個選擇器，繼承另一個選擇器。比如

class1:
.class1{
border:1px solid #ddd;
}

.class2{
@extend .class1;
font-sizi:120%;
}

1.配置webstorm的安裝環(huán)境

2.sass的語法

a.變量

$bg:pink;
.header{background:$bg};
$place:top;

如果變量需要鑲嵌在字符串之中，就必須寫在#{ }之中。

.header{
margin-#{$place}:20px;
}

3.計算功能

body{
margin:(14px/2);
top:50px+100px;
right:$var*10%;
}

6.Mixin 是可以重用的代碼塊

比如：
@mixin left{ 
float:left;
margin-left:10px;
}

div{
@include left;
}

//mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。

@mixin left($value:10px){
float:left;
margin-right:$value;
}
div{
@include left(20px);
}

//可以傳遞多個參數(shù)

@mixin wh($w:100px,$h:100px){
width:$w;
height:$h;
}
div{
@include wh(200px,200px);
}

7.插入文件

@import命令，用來插入外部文件
@import"path/filename.scss";

如果插入的是.css文件，則等同于css的import命令。
@import"foo.css";