CSS框架sass簡介

大家知道CSS框架sass嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

sass結尾的文件有著更嚴格的格式要求，scss文件更貼近原生css

比如sass文件

CSS Code復制內容到剪貼板

#main

color: #fff

&-sidebar

border: 1px solid

等同於scss的

CSS Code復制內容到剪貼板

#main {

color: black;

&-sidebar { border: 1px solid; }

}

編譯後為

其中代表父級元素的& 只可出現在頭部，否則解析不出來。

嵌套屬性

CSS Code復制內容到剪貼板

.funky {

font: {

family: fantasy;

size: 30em;

weight: bold;

}

}

編譯為

CSS Code復制內容到剪貼板

.funky {

font-family: fantasy;

font-size: 30em;

font-weight: bold; }

這個在一些復雜的css3屬性上用處比較大，比如animate

字符串內插

使用#{}作為選擇器變量

CSS Code復制內容到剪貼板

$name: foo;

$attr: border;

p.#{$name} {

#{$attr}-color: blue;

}

p {

$font-size: 12px;

$line-height: 30px;

font: #{$font-size}/#{$line-height};

}

第二個例子如果不用字面量則12除30

運算符

CSS Code復制內容到剪貼板

p {

width: 1in + 8pt;

}

單位如果可以轉換，會被自動轉換

編譯為：

CSS Code復制內容到剪貼板

p {

width: 1.111in; }

p {

font: 10px/8px; // Plain CSS, no division

$width: 1000px;

width: $width/2; // Uses a variable, does division

width: round(1.5)/2; // Uses a function, does division

height: (500px/2); // Uses parentheses, does division

margin-left: 5px + 8px/2px; // Uses +, does division

}

直接字面量，變量使用，函數，括號，優先級

以上編譯為

CSS Code復制內容到剪貼板

p {

font: 10px/8px;

width: 500px;

height: 250px;

margin-left: 9px;

}

顏色：

CSS Code復制內容到剪貼板

p {

color: #010203 + #040506;//相加 rbg三位分別相加

color: #010203 * 2;//相乘

color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);//帶alpha通道的疊加

color: opacify($translucent-red, 0.3);//控制透明的函數，加強非透明

background-color: transparentize($translucent-red, 0.25); //控制透明的函數，加強透明

}

默認變量：

CSS Code復制內容到剪貼板

$content: "First content";

$content: "Second content?" !default;

$new_content: "First time reference" !default;

#main {

content: $content;

new-content: $new_content;

}

!default 如變量被賦值使用之前的賦值，沒被賦值，賦值

相信大家已經學會CSS框架sass了吧!感謝大家對我們網站的支持!

相關推薦：

CSS編程值的技巧簡介