SCSS的一些小筆記

rottengeek 發(fā)布于2019-08-26 14:05 / 1251人閱讀

摘要：嵌套選擇器注釋以為首會保留輸出到變量有作用域，其中和代表同一個變量插值支持參數(shù)聲明重復代碼使用不支持參數(shù)聲明重復代碼使用和區(qū)別除了是否支持參數(shù)外，是把重復的代碼抄到選擇器內(nèi)，而則是把選擇器抄到代碼頭上。聲明使用使屬性可復用

嵌套選擇器：&

.row {
  flex-wrap: wrap;
  border: 1px solid red;
  display: flex;
  &.align-left {
  }
}

注釋：以！為首會保留輸出到CSS

變量：$width:5em;(有作用域，其中$m-width和$_width代表同一個變量)

插值：#{}

@mixin：支持參數(shù)

//聲明
@minxin name{
//重復代碼
}
//使用
@include name{
}

%placeholder：不支持參數(shù)

//聲明
% name{
//重復代碼
}
//使用
@extwnd %name{
}

@mixin 和 %placeholder 區(qū)別：除了是否支持參數(shù)外，@mixin 是把重復的代碼抄到選擇器內(nèi)，而%placeholder 則是把選擇器抄到代碼頭上。

@Function

//聲明
@function x2($value){
    @return $value*2
}
//使用
width:x2(80px);//使屬性可復用

GPU云服務器云服務器 ddos一些比較小的網(wǎng)站 java的一些代碼深度學習的一些應用 php實用的一些代碼

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110008.html

前端小項目之在線便利貼

摘要：實現(xiàn)的效果如下界面可能不是太好看，考慮到容器的高度會被拉長，因此沒有用圖片做背景。實現(xiàn)的效果如下： showImg(https://segmentfault.com/img/remote/1460000011155402); 界面可能不是太好看?，考慮到容器的高度會被拉長，因此沒有用圖片做背景。預覽便利貼涉及的知識點 sass(css 預編譯器) webpack（自動化構...

microelec 2019-08-22 11:06 評論0 收藏0
前端之Sass/Scss實戰(zhàn)筆記

摘要：有兩種語法規(guī)則目前新的語法規(guī)則從開始被稱為時髦的它是語法的的拓展級，就是說每一個語法正確的文件也是合法的文件，文件使用作為拓展名。備注注意源文件和目標文件之間是冒號，與編譯命令中為空格不同。 Introduction Sass 有兩種語法規(guī)則(syntaxes),目前新的語法規(guī)則（從 Sass 3開始）被稱為 SCSS( 時髦的css（Sassy CSS）),它是css3語法的的拓展級...

Sike 2019-08-28 18:17 評論0 收藏0
SCSS學習筆記（一）

摘要：的由來就是加強版的，要講那就一定要從講起英文全稱是一個最初由設計并由開發(fā)的層疊樣式表語言。年發(fā)行，年版本穩(wěn)定，設計和開發(fā)分開進行，讓這個語言的功能相當完善。變量允許使用變量，所有變量以開頭。 SCSS的由來 SCSS就是加強版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Ha...

simpleapples 2019-08-29 16:37 評論0 收藏0
學習筆記 - Sass的安裝與使用手冊

摘要：現(xiàn)在將學習筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應用程序和命令行界面。如果已經(jīng)安裝過，也可以使用指令如果提示權限不足，在命令行前加上即可。參考網(wǎng)頁編輯器的使用的使用很簡單，記住兩條指令即可。最近因為工作需要，自學了Sass。現(xiàn)在將學習筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應用程序（appl...

Jeff 2019-08-29 16:57 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評論0 收藏0