摘要:阮一峰用法指南簡單入門結(jié)一語法較為詳細安裝可用一鍵安裝下載有點慢,記得把第二個給選了安裝完成后記得重啟使用查看是否安裝成功。安裝在中輸入關(guān)于與文件這兩種的區(qū)別在于文件對代碼的排版有著非常嚴格的要求,而且沒有大括號,沒有分號。
阮一峰
結(jié)一
windows可用RubyInstaller一鍵安裝
RubyInstaller 下載有點慢,be patient!
記得把第二個給選了
安裝完成后記得重啟cmd,使用ruby -v 查看是否安裝成功。
2.安裝sass在cmd中輸入gem install sass
3.關(guān)于sass與scss文件這兩種的區(qū)別在于.sass文件對代碼的排版有著非常嚴格的要求,而且沒有大括號,沒有分號。原文地址
個人認為sass雖然比較簡潔,但是并不符合大多數(shù)語言的編碼習(xí)慣,而scss和css比較像,可讀性較高,因此選擇scss
scss:
</>復(fù)制代碼
.a {
color: blue;
font-weight: bold;
text-decoration: underline;
.b {
color:black;
}
}
sass:
</>復(fù)制代碼
.div
color: blue
.b
color: black
font-weight: bold
text-decoration: none
.c
color: white
4.基本語法
創(chuàng)建一個scss文件, test.scss
變量:
</>復(fù)制代碼
$bule: #1875e7;
$size: 10px !default;
.blue-font{
color: $blue;
font-size: $size;
}
.blue-font{
font-size:15px;
}
字符串:
</>復(fù)制代碼
$side: left;
.rounded{
border-#{$side}-radius: 5px;
}
計算:
</>復(fù)制代碼
$twopx: 2px;;
.left-4px{
margin-left: $twopx * 2;
}
嵌套(border后有:):
</>復(fù)制代碼
.nest{
h1{
color:red;
border:{
width: 1px;
color: red;
style: solid;
}
}
}
嵌套中&表示父元素:
</>復(fù)制代碼
a {
&:hover { color: #ffb3ff; }
}
注釋:
</>復(fù)制代碼
//這種注釋編譯后不會保留
/* 這是重要注釋,編譯后會保留 */
繼承:
</>復(fù)制代碼
.extend1 {
border: 1px solid #ffffd;
}
.extend2 {
@extend .extend1;
font-size:120%;
}
Mixin:
</>復(fù)制代碼
@mixin mixin-left($value: 10px) {
float: left;
margin-right: $value;
}
.include-div {
@include mixin-left(20px);
}
顏色函數(shù):
</>復(fù)制代碼
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
插入文件:
</>復(fù)制代碼
@import "path/filename.scss";
@import "foo.css";
5.高級語法
判斷:
</>復(fù)制代碼
$value: 3;
.judge-p {
@if $value == 3 {
background-color: #000;
} @else {
background-color: #fff;
}
}
循環(huán):
for:
</>復(fù)制代碼
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while:
</>復(fù)制代碼
$wi: 6;
@while $wi > 0 {
.item-#{$wi} { width: 2em * $wi; }
$wi: $wi - 2;
}
each:
</>復(fù)制代碼
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定義函數(shù):
</>復(fù)制代碼
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
6. 編譯
打開cmd, 在test.scss目錄下sass test.scss test.css回車,即生成test.css
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/115096.html
摘要:所以出現(xiàn)了各種前端構(gòu)建化工具也應(yīng)運而生等已經(jīng)成為現(xiàn)在前端開發(fā)工程師的必備技能之一。結(jié)語今天的分享就告一段落啦希望能對大家有所幫助。 在互聯(lián)網(wǎng)告訴發(fā)展的今天,自node出現(xiàn)后,我們前端也越來越大(心里美美噠~),同樣帶來的Web業(yè)務(wù)日益復(fù)雜化和多元化,模式也都想webPage模式轉(zhuǎn)向webApp模式,拼幾個頁面搞幾個jquery的插件就能搞一個完成一個項目的日子已經(jīng)是很久遠的曾經(jīng)了,而且...
摘要:在吸取了的一些特性基礎(chǔ)上,有了大幅改進,也就是現(xiàn)在的。嵌套極大程度上降低了選擇器名稱和屬性的重復(fù)書寫。選擇器嵌套選擇器嵌套是指從一個選擇器中嵌套子選擇器,來實現(xiàn)選擇器的繼承關(guān)系。也已經(jīng)成為的一個標配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫,它是css的一個開發(fā)工具,提供了很多便利和簡單的語法,讓css看起來更像是一門...
摘要:未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合,可以傳遞參數(shù),參數(shù)名以符號開始,多個參數(shù)以逗號分開,也可以給參數(shù)設(shè)置默認值。 初識Sass SASS簡介 sass是一種css預(yù)處理器,用專門的編程語言,進行網(wǎng)頁樣式設(shè)計,然后再編譯成正常的CSS文件。Sass是CSS3的擴展,它增加了嵌套規(guī)則,變量,mixins,選擇器繼承等等。Sass生成格式良好的CSS,使樣式表更易于組...
閱讀 3059·2021-11-22 15:29
閱讀 1741·2021-10-12 10:11
閱讀 1777·2021-09-04 16:45
閱讀 2257·2021-08-25 09:39
閱讀 2801·2021-08-18 10:20
閱讀 2527·2021-08-11 11:17
閱讀 457·2019-08-30 12:49
閱讀 3319·2019-08-30 12:49