星空网 > 软件开发 > 网页设计

sass初级语法

用到的sass语法是:

sass --watch test.scss:test.css --style compact --style expanded

如下图:

sass初级语法

1 自定义变量

test.scss内容是:

$color: black;.test1 {  background-color: $color;} 

编译成test.css内容是:

.test1 { background-color: black;}

 

2 在字符串内加变量

test.scss内容是:

$left: left;.test2 {  border-#{$left}:1px #000 solid;}

编译成test.css内容是:

.test2 { border-left: 1px #000 solid;}

 

3 样式内进行加减乘除(注意除法书写)

test.scss内容是:

$para:4;.test3 {  height: 5px+3px;  width: (14px/7);  right: $para*4;}

编译成test.css内容是:

.test3 { height: 8px; width: 2px; right: 16;}

 

4 子元素书写

test.scss内容是:

.test4 {  .lala {    color: pink;  }}

编译成test.css内容是:

.test4 .lala { color: pink;}

 

5 继承(SASS允许一个选择器,继承另一个选择器)

test.scss内容是:

.class1 {  border-left: 1px #000 solid;}.class2 {  @extend .class1;  font-size: 15px;}

编译成test.css内容是:

.class1, .class2 { border-left: 1px #000 solid;}.class2 { font-size: 15px;}

 

6 复用代码块

test.scss内容是:(无变量)

@mixin test6 {  height: 5px;  left: 20px;  top: 10px;}.lili {  @include test6;}

编译成test.css内容是:(无变量)

.lili { height: 5px; left: 20px; top: 10px;}

这个方法很好用的是可以设置变量,如下:

test.scss内容是:(有变量)

@mixin test62($height) {  height: $height;  left: 20px;  top: 10px;}.lili2 {  @include test62(100px);}

编译成test.css内容是:(有变量)

.lili2 { height: 100px; left: 20px; top: 10px;}

 

7 函数

test.scss内容是:

@function aa($color) {  @return $color;}.test7 {  color: aa(pink);}

编译成test.css内容是:

/*example 07*/.test7 { color: pink;}

 

8 导入外部scss或者css文件

test.scss内容是:

@import 'more.scss' 

more.scss内容是:

$width: 30px;.test8 {  width: $width;}

编译成test.css内容是:

.test8 { width: 30px;}




原标题:sass初级语法

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

2018年12月,亚马逊大事件盘点!:https://www.ikjzd.com/articles/13644
疫情过后,家用香薰竟然火了!:https://www.ikjzd.com/articles/136440
销量终究敌不过库存量。怎么办在线等:https://www.ikjzd.com/articles/136441
精细化营销先行 中小卖家做DTC出海品牌如何切中要害?:https://www.ikjzd.com/articles/136442
不可售库存“新”救星!又一大笔仓储费省了:https://www.ikjzd.com/articles/136443
亚马逊这3款产品被要求召回!事关佛山一卖家:https://www.ikjzd.com/articles/136444
83万单,Halara的TikTok美国小店爆单思路拆解:https://www.goluckyvip.com/news/186217.html
携程高铁旅游攻略,更优惠的高铁票价都在哪里:https://www.vstour.cn/a/362188.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流