scss基本用法

$color:red;

$border_style:1px solid green;
.box1

.box1

.father

}

.father 

.father .son

.father

}

.father 

.father:hover

@mixin border_style 

.box1
.box2

.box1 

.box2

@mixin border_style($color) 

.box1
.box2

.box1 

.box2

這裡得$color引數預設給blue, 當傳值用傳的值，不傳時使用預設的值blue

@mixin border_style($color:blue) 

.box1
.box2

.box1 

.box2

@import"./common.scss"

@function px($val);

.box1

.box1

$type:dotted;

.box 
@if $type==dotted
@if $type==double}

.box

$type:null;

.box 
@else if ($type==dotted)
@else }

.box

@for $i from 1 through 3  

}

.item-1 

.item-2 
.item-3

Scss基本用法

scss使用 符號來標識變數。變數有作用域，外部不能引用內部變數。在宣告變數時可以引用其他變數。變數名可以與css中的屬性名和選擇器名稱相同，推薦使用中劃線分隔。border width 1px border width solid black div 編譯後 div如果變數需要鑲嵌在字串之中，就必...

scss基本用法總結

工作的時候天天用，面試的時候卻沒了思路，這就是懶得下場。多總結，多整理，才是成長得王道啊。最近換工作，把以前該整理得工作梳理一遍。color f00 a color ff0 b color 009 btn 子元素 同層全體組合選擇器 div a h2,h3,h4 這個注釋不會出現在css中，這是注釋...

SCSS 的基本使用

首先，用一句話說明 sass scss的關係 sass就是css的預處理器，scss是sass3版本中引入的新語法特性。然後，我們來看怎麼使用呢？像日常一樣，需要安裝npm 包再使用哦 cnpm i s node sass sass loader，當然這裡你是用npm yarn 安裝都是可以的！我們...