A我今天學(xué)習(xí)到了什么
配置webstorm的安裝環(huán)境
安裝后查看軟件Rudy 2.4.1-1/start Command
輸入sass -v
01.PNG
沒有出來輸入gem install sass
Y0SEMP@4TP47PL$CN%{WB7U.png
輸入node -v
3V$@OH4IV%ZZ1UM@T9_~(L9.png
sass的語法
新建xxx.scss
在.scss的文件中寫css的樣式
變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中况木。
.header{
margin-#{$place}:20px;
}
計算功能
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;}
嵌套
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;
li:first-child {
color: red;
margin-left: 40px;
}
li:last-child{
color: aqua;
a{text-decoration: none;
text-align: center;
margin-left: 80px;
}
}
&:hover{cursor: pointer}
}
偽元數(shù)纹腌，偽類選擇器
&:hover{cursor: pointer}
代碼重用
繼承
/SASS允許一個選擇器衰絮，繼承另一個選擇器塞赂。比如戚长，現(xiàn)有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
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);
}
插入文件@import命令
@import命令蛔琅，用來插入外部文件胎许。
@import "path/filename.scss";
如果插入的是.css文件，則等同于css的import命令。
@import "foo.css";
B我掌握了的
配置webstorm的安裝環(huán)境
安裝后查看軟件Rudy 2.4.1-1/start Command
輸入sass -v
01.PNG
沒有出來輸入gem install sass
Y0SEMP@4TP47PL$CN%{WB7U.png
輸入node -v
3V$@OH4IV%ZZ1UM@T9_~(L9.png
sass的語法
新建xxx.scss
在.scss的文件中寫css的樣式
變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中辜窑，就必須需要寫在#{}之中钩述。
.header{
margin-#{$place}:20px;
}
計算功能
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;}
嵌套
div {
@include bx(30px,right);
width: $dw / 2;
height: 300px + 100px;
background: $bj;
margin-#{$tp}:30px * 2 ;
li:first-child {
color: red;
margin-left: 40px;
}
li:last-child{
color: aqua;
a{text-decoration: none;
text-align: center;
margin-left: 80px;
}
}
&:hover{cursor: pointer}
}
偽元數(shù)，偽類選擇器
&:hover{cursor: pointer}
代碼重用
繼承
/SASS允許一個選擇器穆碎，繼承另一個選擇器切距。比如，現(xiàn)有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
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);
}
插入文件@import命令
@import命令北秽，用來插入外部文件葡幸。
@import "path/filename.scss";
如果插入的是.css文件，則等同于css的import命令贺氓。
@import "foo.css";
C我沒掌握的
沒怎么去運用蔚叨，不太會實現(xiàn)，要多練
