成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

sass基礎(chǔ)

TANKING / 3502人閱讀

摘要：基礎(chǔ)之前在項(xiàng)目中用的最多的就是嵌套省事好多，其他功能沒怎么用，今日重拾，想用得漂亮點(diǎn)，所以再去啃啃，當(dāng)鞏固下基礎(chǔ)。，記錄下自己對(duì)的理解。假如兩個(gè)元素在某些樣式上一致，可以用繼承。在某個(gè)程度上和有點(diǎn)像，定義一段公共函數(shù)，再通過調(diào)用。

sass基礎(chǔ)

之前sass在項(xiàng)目中用的最多的就是嵌套（省事好多），其他功能沒怎么用，今日重拾sass，想用得漂亮點(diǎn)，所以再去啃啃sass，當(dāng)鞏固下基礎(chǔ)。anyway，記錄下自己對(duì)sass的理解。

何為sass？

css預(yù)處理器。其實(shí)還有用的很多的less，stylus。

安裝sass

必須先裝ruby，再裝sass。npm install sass-loader的時(shí)候特別久。。你會(huì)看到里面一堆的c++的東西?？梢栽囋囂詫毜膎pm鏡像會(huì)快點(diǎn)。

sass監(jiān)聽

可以讓SASS監(jiān)聽某個(gè)文件或目錄，一旦源文件有變動(dòng)，就自動(dòng)生成編譯后的版本。

    sass --watch index.scss:index.css
    
    //watch a folder
    
    sass --watch sassfile:cssfile
sass語法 變量

變量不用多說，就提一點(diǎn)。如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

    $left: left;
    $size: 10px;
    
    div {border-#{$left}-radius: $size;}
嵌套

嵌套按正常父子元素嵌套就夠用了，其他屬性嵌套可以不用，可讀性差。拿出來說的就是hover的時(shí)候，使用&引用父元素。原先寫css那種hover寫法不管用。

   /*元素嵌套*/
   div {
       p {color: #fff;}
       
       &:hover {color: #ffffd;}
   }

   /*屬性嵌套*/
   p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}
繼承

這個(gè)是我很喜歡的一個(gè)功能。假如兩個(gè)元素在某些樣式上一致，可以用繼承。

    .sub-title {
      color: #666;
      margin: 0;
      font-family: sans-serif;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      padding-top: 50px;
    }
    
    p {
        @extend .sub-title;
        background: #fff;
    }
    
    div {
        @extend .sub-title;
        text-shadow: 1px 1px 1px #ccc;
    }
mixin

minxin在某個(gè)程度上和extend有點(diǎn)像，定義一段公共函數(shù)，再通過@include調(diào)用。還有一個(gè)常用功能就是用來生成瀏覽器前綴。

    @mixin radius ($direct, $value) {
      border-#{$direct}-radius: $value;
      -moz-border-#{$direct}-radius: $value;
      -webkit-border-#{$direct}-radius: $value;
    }
    
    p {
      @include radius(top, 10px);
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111449.html

相關(guān)文章

  • 前端利器：SASS基礎(chǔ)與Compass入門

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

    娣辯孩 評(píng)論0 收藏0

  • 前端基礎(chǔ)工作流：sass自動(dòng)化編輯成css

    摘要：目前提供了觀察文件變化，自動(dòng)將文件編譯成的功能。但在有些機(jī)子上跟蹤編譯非常慢。如果想更順手的完成更復(fù)雜的編譯，就需要使用工具進(jìn)行處理。啟動(dòng)提示打開編輯器編輯下文件，保存，查看下文件，已經(jīng)編譯好了。 目前sass提供了觀察文件變化，自動(dòng)將sass文件編譯成css的功能。但在有些機(jī)子上跟蹤編譯非常慢。使用不便。如果想更順手的完成更復(fù)雜的編譯，就需要使用nodejs,gulp 工具進(jìn)行處理。...

    W4n9Hu1 評(píng)論0 收藏0

  • 大話css預(yù)編譯處理（三）：基礎(chǔ)語法篇

    摘要：值得慶幸的是，這三款預(yù)處理器語言的語法和語法都差不多。在這一節(jié)中，我們依次來對(duì)比一下這三款預(yù)處理器語言各種特性的異同之處，以及使用方法。預(yù)處理器語言支持任何變量例如顏色數(shù)值文本。 一、Sass、LESS和Stylus的語法 每一種語言都有自己一定的語法規(guī)則，CSS預(yù)處理器語言也不例外，在真正使用CSS預(yù)處器語言之前還有一個(gè)不可缺少的知識(shí)點(diǎn)，就是對(duì)語法的理解。值得慶幸的是，這三款CSS預(yù)...

    劉東 評(píng)論0 收藏0

  • sass的學(xué)習(xí)記錄

    摘要：核心團(tuán)隊(duì)不懈努力，一直使其保持領(lǐng)先地位。自身選擇器編譯成自身選擇器屬性嵌套編譯為占位符從以后就可以定義占位選擇器。將局部變量轉(zhuǎn)換為全局變量可以添加聲明編譯為默認(rèn)變量的默認(rèn)變量?jī)H需要在值后面加上即可。 sass簡(jiǎn)介 SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單和可維護(hù)。世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語言！ 兼容C...

    xuweijian 評(píng)論0 收藏0

  • sass筆記-2|Sass基礎(chǔ)語法之讓樣式表更具條理性和可讀性

    摘要：這個(gè)時(shí)候小明如果僅僅引入不想改，那么就是這個(gè)值，如果他想改，就可以在任何一處重新聲明這個(gè)變量，那么就會(huì)變成小明的值。 這一篇主要詳述保持sass條理性和可讀性的3個(gè)最基本方法——嵌套、導(dǎo)入和注釋。 零. 變量 變量本身的作用是為了保持屬性值的可維護(hù)性，把所有需要維護(hù)的屬性值放在同一個(gè)地方，快速更改，處處生效，可謂售后無憂。 1.變量聲明 變量用$符號(hào)開頭進(jìn)行聲明，任何可以用作CSS屬性...

    CloudDeveloper 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<