Scss基礎用法

?

一、注釋用法：

（1）//comment：該注釋只是在.scss源文件中有，編譯后的css文件中沒有。

（2）/!?/：重要注釋，任何style的css文件中都會有，一般放置css文件版權說明等信息。

（3）/?/：該注釋在compressed的style的css中沒有，其他style的css文件都會含有。

?

二、變量：

1.一般以$開頭，有作用域限制

$color: red; .div{background-color: $color; }

?

2.若子選擇器中定義的變量想成為全局變量，可以用!global

.div{$width: 5px !global;width: $width; }.p{width: $width; }

?

3.嵌套引用，需#{}進行包裹

$left: left; .div{border-#{$left}-width: 5px; }

?

4.計算

$left: 20px; .div{margin-left: $left 12px;margin-top: $left / 2; }

?

三、選擇器

1.選擇器嵌套（允許屬性嵌套）

.div{.span{height: 12px;}.p{border: {color: red;}} }

?

2.引用父元素（使用&符號）

.div{&:hover{cursor: pointer;} }

?

四、代碼復用

1.繼承（若在div2后再加一個div1，也會影響div2的屬性）

.div1{font-size: 14px; } .div2{@extend .div1;color: red; }

?

2.引用外部的scss文件（文件路徑建議用相對路徑）

@import ‘ ./test.scss’;

?

3.Mixin與Include

//使用@mixin命令，定義一個代碼塊 @mixin left {float: left;margin-left: 5px; }//使用@include命令，調用這個mixin代碼塊 div {@include left; }

?

五、參數

eg1：

@mixin common($value1, $value2, $defaultValue: 5px){display: block;margin-left: $value1;margin-right: $value2;padding: $defaultValue; } .div1{font-size: 8px;@include common(11px, 13px, 15px); } .div2{font-size: 8px;@include common(11px, 13px); }

?

eg2：

//生成瀏覽器前綴。@mixin rounded($vert, $horz, $radius: 10px) {border-#{$vert}-#{$horz}-radius: $radius;-moz-border-radius-#{$vert}#{$horz}: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;}//使用的時候調用：#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }

?

六、條件語句

可以用@if(){}來判斷，也可以用@if(){}@else來判斷

@if lightness($color) > 30% {background-color: #000; } @else {background-color: #fff; }

?

七、循環語句

1.for循環

@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;} }

?

2.while循環

$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2; }

?

3.each（類似于for）

@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");} }

?

八、函數

可以自定義函數

@function double($n) {@return $n * 2; }#sidebar {width: double(5px); }

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Scss基础用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。