sass

當(dāng)你的電腦中安裝好 Ruby 之后,接下來(lái)就可以安裝 Sass 了。只需要在你的命令終端輸入一行命令即可。

1、通過(guò)命令安裝 Sass

打開(kāi)電腦的命令終端,輸入下面的命令:

gem install sass

sass -v //查看版本是否安裝成功

gem update sass//更新到最新的sass版本

gem uninstall sass//卸載sass(不要點(diǎn))

ws配置路徑:program:C:\Ruby23-x64\bin\sass.bat

mixin

@mixinalert($color:blue){color:$color;}.block{margin:10px;padding:20px;? @includealert(#fff);}

擴(kuò)展繼承

.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{? @extend.message;border-color: green;}

運(yùn)算

.a{width:100px+200px;}

顏色

$color1:red;.div{background: darken($color1,10%);}

$padding:10px5px10px5px;.div{padding:$padding;padding-left: nth($padding,2);}

$maps:(color:red,background:blue);.div{background:map-get($maps,background);}

@at-root.con{//跳出嵌套}

@functiondobule($cc){? @return$cc*2;}.ccc{width:dobule(5px);}

$aa:8;.c{content: #{$aa};}

$srceen:800;@if$srceen> 900{body{background: yellow;? }}@else{body{background: blue;? }}

@for$i from1to5{? .span#{$i}{? ? width:20% * $i;? }}

.#{content}{background: red;}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 基礎(chǔ) 聲明變量 普通變量 默認(rèn)變量 變量覆蓋:只需要在默認(rèn)變量之前重新聲明下變量即可 變量的調(diào)用 局部變量和全局變...
    Jill1231閱讀 1,387評(píng)論 0 1
  • 學(xué)習(xí)Sass(官網(wǎng):Sass)之前需要了解什么是Sass,Sass全稱(chēng):Syntactically Awesome...
    haoxilu閱讀 629評(píng)論 0 3
  • Sass入門(mén)與實(shí)戰(zhàn) **Sass is the most mature, stable, and powerful...
    2f3abe35f5ac閱讀 754評(píng)論 0 2
  • http://www.w3cplus.com/sassguide/http://www.ruanyifeng.co...
    簡(jiǎn)不簡(jiǎn)單_都好閱讀 513評(píng)論 0 0
  • 職場(chǎng)過(guò)當(dāng) 永遠(yuǎn)記不住自己該做的事情,讓老員工追在屁股后面提醒;大毛病沒(méi)有,小問(wèn)題不斷,毛毛躁躁沒(méi)有消停的時(shí)候;同一...
    承思而行閱讀 281評(píng)論 0 0

友情鏈接更多精彩內(nèi)容