进阶篇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

本书共70小节:

评论 (写第一个评论)