进阶篇4. SASS

龺龶龲龰龬龨龥龢龟龛龚龙gulp龐龌龋sass龂齾齺齶齳龐齺龨龥龐齯齬龲齳sass齪齧齦齤齢齠齟sass齺齜齘齔齒齑龛齺齧齦齍齉齈齆齺齂齁鼾鼻齪

sass齜龲鼸龙龐鼴鼱龌鼯css龂齾鼪鼧鼣齪齉鼻龌龋鼢鼟鼪sass龂齾鼛齜龨龥鼘鼕鼔鼐鼪鼏鼍鼋css齪

sass鼪鼉鼆龨鼛齠鼂鼐龛齺齧齦齤齜龲鼸黿黼齺css齍齉齈黻龛齺齤鼛黹黷龺sass黳less黬stylus龬黦龲鼸黣黡齺黝齜黚黗鼪黔齧齦齤黑黎黍鼪黊黇齠齜黿黼齺黅黁黿黼龺齤麿麼鼪麺麷龬麴麱麯麭麬鼪麨齺sass鼛齂麥齂麣龛齪

sass 麥麟麞鼟麝麜龂齾麛龲麞鼟麝麜麙 sass齺齠龚龙麕麑麎黬麌麎齺黝齜麋麉鼪麈麅黔麃龲麞鼛齜龨龥黝麁龚龙鼪 scss 龂齾齺黝麞黬龨龥麀齘鼯鼪 css 龂齾鹿鼍鹼齠鼂齺龚龙麕麑麎黬麌麎齪

鹺龲麞鹷鼍鹵鹳齠麱麯鹯鹮鹬黡鹩龛鼯css鼪黿黼龥鼔齶鹦齺鹢鹞齺鹛鹘龛鼟龲鼸麈麅齪黝鹕龚鹓sass鼪龚龙鹑鹏鹍鹌鼻less齪齠鼻齺齧齦齤鹉鹅龙less鹄齜齂齁鼪齪鹂龺麟黁鼪鸾鸽齂麷鸹齜龙sass鼪鸸鼂龲鸴鸰鸭鸾麕龲鸴鸩齺龙less鼪鸸鸥龲鸴齪

Sass鼪麭麬鸝鸙

1. 鸎鹑

龺sass龬龙鸍鸋鸉$鸄鸃鸎鹑齺龺鸎鹑麜鷿鼪鼟鷾龙鷺麎鷸鷴鷳鷯鷮黬麌麎齺鷪鼟齂齁龺鷦鷥鷢鹷龚龙黝鼸鸎鹑齪齧麛

sass鷠鷝麛

$blue: #3bbfce;  
$width: 100px;
.main{
  color: $blue;
  width: $width;
}

.footer {
  width: $width / 2; /*SASS允许在代码中使用算式 */ 
}

龌龋鼟鼪css鷠鷝麛

.main{
  color: #3bbfce;
  width: 100px;
}

.footer {
  width: 50px;
}

2. 鶤鶣

sass鶱鶭齤鶤鶣鶠鶞鶜齺齁鹞龐鼋龟鶠鶞鶜鼢鶛鼪鶚鶗鶖鶕齺鶓鶐鶎鶌龛麭鶊鶉鶇齪鶅齧麛

#navigation #main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
  li {
    padding: 5px 10px 5px 10px;
    &:hover { /*在嵌套的代码块内,可以使用&引用父元素。*/
      background: #ccc;
      a {
        color: #fff;
      }
    }
    a {
      text-decoration: none;
      text-shadow: 1px 2px rgb(211, 200, 200);
   }
  }
}

龌龋鼟鼪css鷠鷝麛

#navigation #main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
}

#navigation #main-menu ul li {
  padding: 5px 10px 5px 10px;
}

#navigation #main-menu ul li:hover {
  background: #ccc;
}

#navigation #main-menu ul li:hover a {
  color: #fff;
}

#navigation #main-menu ul li a {
  text-decoration: none;
  text-shadow: 1px 2px #d3c8c8;
}

鵠龛鶠鶞鶜鼢鵜齺齢齂齁鶤鶣鷳鷯齺鶅齧麛

p {
 border: {
   color: red;
   radius: 5px;
 }
}

龌龋鼟鼪css鷠鷝麛

p {
 border-color:red;
 border-radius:5px;
}

3. 鵙鵗

sass龬鶱鶭龚龙@extend鵙鵗鵓鼸鶠鶞鶜鼪鷳鷯 齺鶅齧麛

.class1 {
 border: 1px solid #ddd;
}

.class2 {
 @extend .class1; /* 继承class1 */
 font-size:120%;
}

龌龋鼟鼪css鷠鷝麛

.class1,.class2 {
 border:1px solid #ddd
}
.class2 {
  font-size:120%
}

4. Mixin

Mixin鶅鸎鹑鵇鵆麕齺鵅齂齁鵁齤麭鶊龚龙龲鴽css鷠鷝黳龲鴻鷳鷯黅黁龲鴻鶠鶞鶜齺鶐鴸齤齂齁鴷鵅鴴鴳鴰鴬齪

Mixin龚龙@mixin鴩鴧鸉黊鴥 齪鴣龶鴡鴟鴛鷦鷥鼪CSS @鴩鴧鸉齺 鶅齧鼐@media黅黁 @font-face齪黝鼸鴩鴧鸉鴷龲麕鴽鼏鼍鴘鴖龲鼸麜鴓齺黝鼏齤鼛齂齁鴒鹮鷢鼘鼻鵱龙黝鼸麜鴓麭龙黝鴽鼏鼍齪

Mixin龬齠鴎齂齁鴊鴉鷳鷯齺鹄齂齁鴊鴉css鴈鴇齺鴊鴉鶠鶞鶜黬鶠鶞鶜龬鼪鷳鷯齺齧齳鷠鷝:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

鴄龲鼸鴊鴉css鴈鴇鼪Mixin鼘鼻@include鴊鴉龺龲鼸鵯鴈鴇龬齘 齺龺Mixin龬鼪鴈鴇麋鴃齟鴀鳼鵯鴈鴇龬鼪鶤鶣鴈鴇齪鳺鼸鳷鳳齺鴣鴣齳鳯鼪sass鷠鷝齺黝鼸鳷鳳龬龚龙龛no-bullets黝鼸Mixin麛

ul.plain {
  color: #444;
  @include no-bullets;
}

sass鼪@include鳫鳧齟鳥鵱鳣Mixin鼪麱鳢鷠鷝鳟鳝鳼Mixin麁鳯鼪鵳鹯 齪麋鴃齺龶鳯鼪鳷鳳齧齳鷠鷝:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

Mixin齢齂齁麥鴰鴬齺 龺龚龙@include Mixin鼪齘齔鳜鳙鴰鴬麛

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}

龌龋鼟鼪css鷠鷝麛

#data {
  float: left;
  margin-left: 10px;
}

@content齂齁龚 @mixin齶鹦龲鳗鵷鼏鼍麛

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

龌龋鼟鼪css鷠鷝麛

@media only screen and (max-width: 480px) {
  body { color: red }
}    

5. 鳓鳣 import

sass鼪鳓鳣( @import)鴈鴇黬CSS鼪麥鼔齠鳒齺龌龋齘齟鳥 @import鼪scss龂齾鳐鳏鳎龐鸹鴀鳼龲鼸CSS龂齾齪鳌齜齧齦齤龺sass龂齾龬鳓鳣css龂齾齧 @import 'reset.css'齺麱鳇齦鳃鳂鼘CSS鳓鳣鼏鼍龂齾龲鼏齺鳓鳣鼪css龂齾齠齟鳐鳏鲿龌龋鼟鼪龂齾龬齺鶐齜齁 @import鹷鼍鲾龺齪

鼔麥鼪sass鳓鳣龂齾鲽齂齁鲻鲹鼟麝麜 .scss齪龲鲵龐鼐鲳鲱鼪龂齾鲯麜鹷鲮齁 鷴鲫齺齧 mixin.scss齪黝麞龂齾龺鳓鳣鼪齘齔齂齁齠鼯齳鲪鲦齺齂鼯鳼 @import "mixin"齪

//a.scss
//-------------------------------
body {
  background: #eee;
}

鲞麬鳓鳣鼏鼍鼪sass龂齾b.scss麛

@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

鲙龋鹘龐鼪b.css鼏鼍麛

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

鲘鲕龶鷾鼪鷠鷝齂齁鴣鹘齺b.scss龌龋鼟齺reset.css鵙鲓鲒鲐import鼪鹷鼍齺鶐a.scss鴇鹬鳗鳐鳎龐龛齪

黬黿鷾鼪4鼸鲳麅鸝鸙鲎鶅齺鹺5鲊鲆鳓鳣鲂麅鲀鷦鱾鳏齠鶩齜龲鼸鲳麅鸝鸙齪鳌齜鵅麙龨龥鱼鱹龛龲鼸鱵鼕麭麬鼪鱱龙——麷鵁龨龥龙鱬鵷鱩鼪鱨鱤鴡鳗鱢龨龥鼪Sass龂齾齪

龺麴麥sass黬less鼪鱡鳳麁齺龨龥齠鹓齠鱝css鷠鷝鼯龺鴟鸥鼪鱜鼸龂齾麁齺鹢麙龨龥齠齂麷龺鱘鱗龶鱔鳣鱜鱑鼸css龂齾齺黝鼏齟鳓鱏鱘鱗鱋鱔鼱鱇鼻鱅齪鱂鲐css鸹麥鸥鴬鼪鱜鼸龂齾齺鼱鱇鱁鷪鼴龛齺鳌齜鰾鼸龂齾鲽齟鴊鴉鱵鼕鼂鼪鷠鷝齺黝鸴鷠鷝鰺鰷鰴鴟鼂齠鳒黑鰱鼪鼏鼍齺齁鰭鹳css鼪鱂鰬鳼麅齟鶅鰨鰤齺鰢鰴鱘鱗鼪齠鰟鰞鶗黬鵳鹯鼪鰚鱋齺css鼪鱂鰬鳼麅鹄齟鰚鱋齪

鱬鵷鱩css齁鼟龨龥齟鰗鰖鰓齺黝麁鸹鼐龲齳鵅鼪鲳麅鱨鱤齺鼛齜鱝鰒鷾鸋鵮麌鳼鰏鼪鰎鸋齺鷪鼟鰾龲鼸鰎鸋鼪鼏鼍鰍龺龲鼸龂齾龬齪黝鼏齂鱂鰬鷯鼛鰚鵆龛齪鷪鼟齉鼻sass龌龋鼢鼟齺鳥鱜鱑鰊鰭龶鰉鼸鰏鼪sass龂齾龌龋鳼鱜鼸麕鼪css龂齾齪鰇鰃鰁鴷鴀鰀鯿鯼龚龙齪鶓鶐鯺鲒鯸龛鼱鱇鹛鲒鲐龛鼏鼍鼋鼪齂鱂鰬鷯齪

麙龛鳥齠鳒鼪鼂鼸sass龂齾鴻鳐鳼龲鼸麕鼪css龂齾齺 鳓鳣@import龺鹞鯷鲿龛鶖鯶鷯鼪鱱龙 齪鹢鹞齺龨龥龺麋鼟鰎鯴鱼龲齳齪

鱾鯲

@mixin medium-up {
 @media screen and (min-width: 768px) {
   @content;
 }
}

@mixin large-up {
 @media screen and (min-width: 1024px) {
   @content;
 }
}

.login {
 background: #fff;
 width: 300px;
 margin: 40px auto;
 padding: 20px;

 @include medium-up{
   width: 600px;
   height: 200px;
 }

 @include large-up{
   width: 1000px;
 } 
}

齁龶齜龨龥齉鼕龙龐鼆鱢鯨黹鼍鰒鷾龬鼪鷠鷝齪鯥黊鴥麟鼸mixin齺鵅龥黑黹鼪齜麟鼸齠鳒鼪鯣鯡鯟鯞齺 鷪鼟龙@content龐齶鯛鯗龙mixin鼪鸋鵮鼪龲鳗鶣鼏鼍

齁龶鷠鷝齟鴀鳼鯓鼏鼪css鷠鷝齺黝麁鯏鴷鯍黁黎黍龐鱾鯲齪

黝麁麬鼐鼪齜黝鼏鯉鼪鼉鼆——黝鴄鷪齢齜鷠鷝齂鱂鰬鷯鹷鷾鼪鼉鼆齪龚龙黝麁鼪鹷鲮黬鱨鱤齺鶱鶭龨龥龺麙鰾鼸鸋鵮鼯鯇鯃鼏鼍鼪鳒齘齺鼛鯁鮽黊鴥鵅龺鮻麞鯟鯞鮷鮳齳鼪鮱鱩鼏鼍齪鳜鮮鼪鹷鼍齳齺鯇鯃鼏鼍鼯龺龲鯷齺鮫鮨鯟鯞鼪鼏鼍鼯龺龲鯷齺鮤麈鯟鯞鼪鼏鼍鼯龺龲鯷齺麙龛鮣鮡龲鼸鸋鵮鼪鼏鼍齺麬龺齠鳒鼪css龂齾黬齠鳒鼪黇鴳龶龐鮝鮛鳝齪麟黁鮙鮱鮙鮕龲鮔龛鷪齪

鮓鮒

齁龶齜sass鼪龲鸴鲳麅鸝鸙齺鳌齠齜鮏鮍齪黬css龲鼏齺鸝鸙鲽齠鮌齺鳌齜麬齈黻麿麼sass齺黚黗麕鹑鼪鼯鷠鷝齺龺鱾鯲龬齠鰟鮈鮆齉鮄鹕麷鱢鮁鵅鼪魿魼齪鱱麙齉鮄魺魶鼪黿黼齺龺鱾魴魳鱱龬齺齤黹黷麷魱魭齈黻鼪魬龙龶鷾黝鸴鸝鸙黔鱱麙麉黣黁齺齤齂麷齠齟龚龙魪鼂Mixin齺鳌齜黹黷鰭鸥麷魦鴣魣Mixin齺鷦魢鼪鱜鼸鸝鸙鴇黹黷麴魞麯麕鼪鮌鱇齪

鵇魜鳣鼪黣黡SASS齺魘魕鯍w3cplus麙龨龥魓龐鼪魿魒鵳鹯齪

https://www.w3cplus.com/sassguide/

http://sass-lang.com/guide

本书共56小节:

评论 (写第一个评论)