A我今天學(xué)了什么
1.配置webstorm的安裝環(huán)境
http://www.reibang.com/p/c482c6ea0a4b //簡書里有詳細(xì)步驟
2.sass的語法
http://www.reibang.com/p/0f96f42b6924
2.1變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中赂蕴，就必須需要寫在#{}之中。
.header{
margin-#{$place}:20px;
}
2.2計(jì)算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
2.3嵌套
div h{
color:red;
}
可以改寫為
div {
hi{
color:red;
}
}
2.4代碼重用
2.4.1繼承
//SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
2.4.2Mixin
//是可以重用的代碼塊
@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);
}
//可以傳遞多個(gè)參數(shù)
@mixin wh($w:100px,$h:100px) {
width:$w;
height:$h;
}
div {
@include wh(200px,200px);
}
2.5插入文件
@import命令壳影，用來插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件弥臼，則等同于css的import命令宴咧。
@import "foo.css";
我掌握了什么
1.配置webstorm的安裝環(huán)境
http://www.reibang.com/p/c482c6ea0a4b //簡書里有詳細(xì)步驟
2.sass的語法
http://www.reibang.com/p/0f96f42b6924
2.1變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中径缅。
.header{
margin-#{$place}:20px;
}
2.2計(jì)算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
2.3嵌套
div h{
color:red;
}
可以改寫為
div {
hi{
color:red;
}
}
2.4代碼重用
2.4.1繼承
//SASS允許一個(gè)選擇器掺栅，繼承另一個(gè)選擇器。比如纳猪，現(xiàn)有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
2.4.2Mixin
//是可以重用的代碼塊
@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);
}
//可以傳遞多個(gè)參數(shù)
@mixin wh($w:100px,$h:100px) {
width:$w;
height:$h;
}
div {
@include wh(200px,200px);
}
2.5插入文件
@import命令沙绝，用來插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件鼠锈，則等同于css的import命令闪檬。
@import "foo.css";
c我沒有掌握什么
全部掌握
