CSS框架sass的簡(jiǎn)單一覽
segmentfault 發(fā)布時(shí)間:2015-07-20 17:10:15 作者:TomDong
我要評(píng)論

這篇文章主要介紹了CSS框架sass的簡(jiǎn)單一覽,像嵌套屬性和運(yùn)算符等主要特性都在文中有簡(jiǎn)單的介紹,需要的朋友可以參考下
sass結(jié)尾的文件有著更嚴(yán)格的格式要求,scss文件更貼近原生css
比如sass文件
CSS Code復(fù)制內(nèi)容到剪貼板
- #main
- color: #fff
- &-sidebar
- border: 1px solid
等同于scss的
CSS Code復(fù)制內(nèi)容到剪貼板
- #main {
- color: black;
- &-sidebar { border: 1px solid; }
- }
編譯后為
其中代表父級(jí)元素的& 只可出現(xiàn)在頭部,否則解析不出來(lái)。
嵌套屬性
CSS Code復(fù)制內(nèi)容到剪貼板
- .funky {
- font: {
- family: fantasy;
- size: 30em;
- weight: bold;
- }
- }
編譯為
CSS Code復(fù)制內(nèi)容到剪貼板
- .funky {
- font-family: fantasy;
- font-size: 30em;
- font-weight: bold; }
這個(gè)在一些復(fù)雜的css3屬性上用處比較大,比如animate
字符串內(nèi)插
使用#{}作為選擇器變量
CSS Code復(fù)制內(nèi)容到剪貼板
- $name: foo;
- $attr: border;
- p.#{$name} {
- #{$attr}-color: blue;
- }
- p {
- $font-size: 12px;
- $line-height: 30px;
- font: #{$font-size}/#{$line-height};
- }
第二個(gè)例子如果不用字面量則12除30
運(yùn)算符
CSS Code復(fù)制內(nèi)容到剪貼板
- p {
- width: 1in + 8pt;
- }
單位如果可以轉(zhuǎn)換,會(huì)被自動(dòng)轉(zhuǎn)換
編譯為:
CSS Code復(fù)制內(nèi)容到剪貼板
- 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
- }
直接字面量,變量使用,函數(shù),括號(hào),優(yōu)先級(jí)
以上編譯為
CSS Code復(fù)制內(nèi)容到剪貼板
- p {
- font: 10px/8px;
- width: 500px;
- height: 250px;
- margin-left: 9px;
- }
顏色:
CSS Code復(fù)制內(nèi)容到剪貼板
- 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);//控制透明的函數(shù),加強(qiáng)非透明
- background-color: transparentize($translucent-red, 0.25); //控制透明的函數(shù),加強(qiáng)透明
- }
默認(rèn)變量:
CSS Code復(fù)制內(nèi)容到剪貼板
- $content: "First content";
- $content: "Second content?" !default;
- $new_content: "First time reference" !default;
- #main {
- content: $content;
- new-content: $new_content;
- }
!default 如變量被賦值使用之前的賦值,沒(méi)被賦值,賦值
相關(guān)文章
- 這篇文章主要介紹了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的邏輯操作符和字符串操作符等的翻譯和用法,需要的朋友可以參考下2016-03-08
- 這篇文章主要介紹了CSS的SASS樣式編程指南,包括對(duì)于嵌套器和注釋的使用等方面,需要的朋友可以參考下2015-07-12
學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對(duì)比
Css可以讓你做很多事情,但它畢竟是給瀏覽器認(rèn)的東西,對(duì)開(kāi)發(fā)者來(lái)說(shuō),Css缺乏很多特性2012-07-11- CSS預(yù)編譯器有 SASS LESS Stylus等等,SCSS是SASS3引入的新語(yǔ)法。這篇文章給大家介紹sass(scss)的安裝與使用教程,感興趣的朋友一起看看吧2018-10-15