国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SASS入門

edagarli / 456人閱讀

摘要:阮一峰用法指南簡單入門結(jié)一語法較為詳細安裝可用一鍵安裝下載有點慢,記得把第二個給選了安裝完成后記得重啟使用查看是否安裝成功。安裝在中輸入關(guān)于與文件這兩種的區(qū)別在于文件對代碼的排版有著非常嚴格的要求,而且沒有大括號,沒有分號。

阮一峰(簡單入門)
結(jié)一(較為詳細)

1.安裝Ruby

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ù)制代碼

  1. .a {
  2. color: blue;
  3. font-weight: bold;
  4. text-decoration: underline;
  5. .b {
  6. color:black;
  7. }
  8. }

sass:

</>復(fù)制代碼

  1. .div
  2. color: blue
  3. .b
  4. color: black
  5. font-weight: bold
  6. text-decoration: none
  7. .c
  8. color: white
4.基本語法

創(chuàng)建一個scss文件, test.scss

變量:

</>復(fù)制代碼

  1. $bule: #1875e7;
  2. $size: 10px !default;
  3. .blue-font{
  4. color: $blue;
  5. font-size: $size;
  6. }
  7. .blue-font{
  8. font-size:15px;
  9. }

字符串:

</>復(fù)制代碼

  1. $side: left;
  2. .rounded{
  3. border-#{$side}-radius: 5px;
  4. }

計算:

</>復(fù)制代碼

  1. $twopx: 2px;;
  2. .left-4px{
  3. margin-left: $twopx * 2;
  4. }

嵌套(border后有):

</>復(fù)制代碼

  1. .nest{
  2. h1{
  3. color:red;
  4. border:{
  5. width: 1px;
  6. color: red;
  7. style: solid;
  8. }
  9. }
  10. }

嵌套中&表示父元素:

</>復(fù)制代碼

  1. a {
  2. &:hover { color: #ffb3ff; }
  3. }

注釋:

</>復(fù)制代碼

  1. //這種注釋編譯后不會保留
  2. /* 這是重要注釋,編譯后會保留 */

繼承:

</>復(fù)制代碼

  1. .extend1 {
  2. border: 1px solid #ffffd;
  3. }
  4. .extend2 {
  5. @extend .extend1;
  6. font-size:120%;
  7. }

Mixin:

</>復(fù)制代碼

  1. @mixin mixin-left($value: 10px) {
  2. float: left;
  3. margin-right: $value;
  4. }
  5. .include-div {
  6. @include mixin-left(20px);
  7. }

顏色函數(shù):

</>復(fù)制代碼

  1. lighten(#cc3, 10%) // #d6d65c
  2. darken(#cc3, 10%) // #a3a329
  3. grayscale(#cc3) // #808080
  4. complement(#cc3) // #33c

插入文件:

</>復(fù)制代碼

  1. @import "path/filename.scss";
  2. @import "foo.css";
5.高級語法

判斷:

</>復(fù)制代碼

  1. $value: 3;
  2. .judge-p {
  3. @if $value == 3 {
  4. background-color: #000;
  5. } @else {
  6. background-color: #fff;
  7. }
  8. }

循環(huán):

for:

</>復(fù)制代碼

  1. @for $i from 1 to 10 {
  2. .border-#{$i} {
  3.  border: #{$i}px solid blue;
  4.  }
  5. }

while:

</>復(fù)制代碼

  1. $wi: 6;
  2. @while $wi > 0 {
  3. .item-#{$wi} { width: 2em * $wi; }
  4. $wi: $wi - 2;
  5. }

each:

</>復(fù)制代碼

  1. @each $member in a, b, c, d {
  2. .#{$member} {
  3. background-image: url("/image/#{$member}.jpg");
  4. }
  5. }

自定義函數(shù):

</>復(fù)制代碼

  1. @function double($n) {
  2. @return $n * 2;
  3. }
  4. #sidebar {
  5. width: double(5px);
  6. }
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

相關(guān)文章

  • sass入門初體驗

    摘要:接上文入門初體驗,接下來講講,有兩種文件后綴名,一種是,另一種是。 接上文less入門初體驗,接下來講講sass,sass有兩種文件后綴名,一種是.sass,另一種是.scss。前者類似于ruby的語法規(guī)則,沒有花括號,沒有分號,具有嚴格的縮進;而后者更貼近于css的語法規(guī)則,易于閱讀,更具語義性,所以本文采用.scss后綴名來編寫sass代碼 編譯 1、Ruby:sass是由Rub...

    aisuhua 評論0 收藏0
  • 20分鐘gulp快速入門

    摘要:所以出現(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)了,而且...

    RichardXG 評論0 收藏0
  • 前端利器:SASS基礎(chǔ)與Compass入門

    摘要:在吸取了的一些特性基礎(chǔ)上,有了大幅改進,也就是現(xiàn)在的。嵌套極大程度上降低了選擇器名稱和屬性的重復(fù)書寫。選擇器嵌套選擇器嵌套是指從一個選擇器中嵌套子選擇器,來實現(xiàn)選擇器的繼承關(guān)系。也已經(jīng)成為的一個標配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫,它是css的一個開發(fā)工具,提供了很多便利和簡單的語法,讓css看起來更像是一門...

    娣辯孩 評論0 收藏0
  • [Sass]-Sass入門

    摘要:未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合,可以傳遞參數(shù),參數(shù)名以符號開始,多個參數(shù)以逗號分開,也可以給參數(shù)設(shè)置默認值。 初識Sass SASS簡介 sass是一種css預(yù)處理器,用專門的編程語言,進行網(wǎng)頁樣式設(shè)計,然后再編譯成正常的CSS文件。Sass是CSS3的擴展,它增加了嵌套規(guī)則,變量,mixins,選擇器繼承等等。Sass生成格式良好的CSS,使樣式表更易于組...

    godiscoder 評論0 收藏0
  • vue入門文章

    摘要:本來想自己寫一篇關(guān)于入門的文章。后面可能在這篇文章基礎(chǔ)上,有所內(nèi)容的增加。預(yù)處理器定義了一種新的專門的編程語言,編譯后成正常的文件。 本來想自己寫一篇關(guān)于vue入門的文章。但是看到鏈接的文章后,覺得寫得太詳細了,實在有保存下來的必要。后面可能在這篇文章基礎(chǔ)上,有所內(nèi)容的增加。 CSS預(yù)處理器 定義了一種新的專門的編程語言,編譯后成正常的CSS文件。為CSS增加一些編程的特性,無需考慮瀏...

    seanHai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<