好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

sass基础语法小结

懂得简单的编程和css语法,sass语法其实非常简单~

变量声明和使用

使用美元符号$标记:

// 应用到属性值可直接引用
$pcolor:#FB0;
p {color:$pcolor;}
// 应用到属性名使用#{}包裹获取
$side:left;
img {border-#{$side}:1px solid $pcolor;}

变量的数据类型包括:

  • 数字(例如 1.2、13、10px)

  • 文本字符串,无论是否有引号(例如 "foo"、'bar'、baz)

  • 颜色(例如 blue、#04a3f9、rgba(255, 0, 0, 0.5))

  • 布尔值(例如 true、false)

  • 空值(例如 null)

  • 值列表,用空格或逗号分隔(例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif)

变量作用域:

在最外层定义的为全局变量,为默认值,在嵌套{}里面定义的为局部变量。

局部变量只有在当前{}体里面起作用,可在自己的作用域覆盖但不改变同名的全局变量。

同作用域的同名变量最后定义值为准。

嵌套规则

使用{}包裹子选择器,层层往下,伪类使用&连接父选择器:

普通嵌套:

#content {
    background-color:#FFF;
    div {margin:10px;}
    body & {margin-left:auto;margin-right:auto;}
    p {
        font-size:1.2em;
        a {
            color:blue;
            &:hover {color:red;}
        }
        body & {padding:5px;}
    }
}

编译结果:

#content { background-color: #FFF; }
#content div { margin: 10px; }
body #content { margin-left: auto; margin-right: auto; }
#content p { font-size: 1.2em; }
#content p a { color: blue; }
#content p a:hover { color: red; }
body #content p { padding: 5px; }

群组和符号选择器嵌套:

群组与单个选择器或群组与群组之间会一一组合成选择器;

符号选择器>,+,~可跟在子选择器前面,或者父选择器后边;

&符号可用来连接父选择器:

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
div, p {
  a {font-size: 1.4em}
}
nav, aside {
  a, span {color: blue}
}
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译结果:

.container h1, .container h2, .container h3 {margin-bottom: .8em;}
div a, p a {font-size: 1.4em;}
nav a, nav span, aside a, aside span {color: blue;}
article ~ article {border-top: 1px dashed #ccc; }
article > section {background: #eee; }
article dl > dt {color: #333;}
article dl > dd {color: #555;}
nav + article {margin-top: 0;}

属性嵌套:

把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中

nav {  
    border: {
      style: solid;  width: 1px;  color: #ccc;
    }
}
img {  
    border: 1px solid #ccc {
      left: 0px;  right: 0px;
    }
}

编译结果:

nav {border-style:solid;border-width:1px;border-color:#ccc;}
img {border:1px solid #ccc;border-left:0px;border-right:0px;}

注释规则

CSS标准注释 /* comment */ ,会保留到编译后的CSS文件。

若当注释出现在原生css不允许的地方,也会被抹去。


单行注释 // comment,只保留在SASS源文件中,编译后被省略。


在/*后面加一个感叹号,/*! comment */,表示这是"重要注释"。

即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式;

通过继承不但继承基本样式,还包括拓展样式。

通过@extend语法实现:

//通过选择器继承继承样式
.error {
  border: 1px red;
  background-color: #fdd;}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

编译结果:

.error, .seriousError { border: 1px red; background-color: #fdd; }
.seriousError { border-width: 3px; }
.error a,  .seriousError a { color: red; font-weight: 100; }
h1.error, h1.seriousError { font-size: 1.2rem; }

混合器共享样式

大段需要重用的样式代码段可使用@mixin定义成混合器,然后使用@include重用。

普通混合器:

如常用的跨浏览器圆角代码:

@mixin rounded-corners {  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;
}
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
.alertbox {
  color: red;
  border: 1px solid #eeeeee;
  @include rounded-corners;
}

编译结果:

.notice { 
    background-color: green;
    border: 2px solid #00aa00;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.alertbox {
    color: red;
    border: 1px solid #eeeeee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

混合器嵌套关系

混合器在重用时相当于把定义的样式代码段完整插入需要重用的位置;

和父元素嵌套也同样根据插入后形成的新的嵌套关系获得。

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

编译结果:

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

混合器传参和默认参数

混合器传参数相当于函数,有多种方法:

直接传参(按顺序),逗号分割的索引列表传参(可不按顺序)和默认参数(默认参数在最后,可不传)。

直接传参和索引列表传参:

@mixin link-colors($normal, $hover, $visited) {  
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}
a {@include link-colors(blue, red, green);}
.error a {@include link-colors($visited:blue,$hover:green,$normal:red);}

编译结果:

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

.error a { color: red; }
.error a:hover { color: green; }
.error a:visited { color: blue; }

默认参数传参:默认参数可以是变量,也可以是普通数值:

// 默认参数都是和$normal相等,因此可以只传一个参数
@mixin link-colors($normal,$hover: $normal,$visited: $normal){
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}
a {@include link-colors(red);}

编译结果:

a { color: red; }
a:hover { color: red; }
a:visited { color: red; }

运算

数字运算

支持普通+,-,*,/,%运算,支持单位换算,也支持大于小于等于及其组合的关系运算,例如

p {width: 1in + 8pt;}

编译结果:

p {width: 1.111in;}

除法运算特殊:CSS允许部分除法运算,在SASS编译时会保留,但以下三种情况会计算:

  1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

  2. 如果数值被圆括号包围。

  3. 如果数值是另一个数学表达式的一部分。

例子:

p {
  font: 10px/8px;             // 纯 CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}

编译结果:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

使用#{}保存除法给CSS:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height}; // 使用#{}保留除法到CSS计算
}

编译结果:

p {font:12px/30px;}

颜色运算

所有算数运算都支持颜色值, 并且是分段运算的。 也就是说,红、绿、蓝各颜色分量会单独进行运算。

例:

p {
  color: #010203 + #040506;
}
span {
  color: #010203 * 2;
}
a {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译结果:

p { color: #050709; }
span { color: #020406; }
a { color: rgba(255, 255, 0, 0.75); }

字符串运算

+连接字符串,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译结果:

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

#{}添加动态值:

p:before {
  content: "I ate #{5 + 10} pies!";
}

编译结果:

p:before {
  content: "I ate 15 pies!"; }

布尔运算

and or not 与或非


以上运算可使用圆括号改变运算顺序~

高级运算:判断语句,循环语句和函数

判断:@if和@else

判断条件,赋值属性:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
$type: monster;
a {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译结果:

p {border: 1px solid; }
a {color: green; }

循环:@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译结果:

.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }

循环:@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译结果:

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

循环:@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译结果:

.item-6 {width: 12em;}
.item-4 {width: 8em;}
.item-2 {width: 4em;}

自定义函数

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

编译结果:

#sidebar {width:10px;}

SASS自带很多有用的函数,需自行去了解~

嵌套导入SASS文件

说明:

一般为了任务的分配和合理的配置,不同作用的SASS使用不同的小文件定义。

文件名称一般以下划线开头,局部引用时可省略下划线和后缀。

引用后直接将代码内容插入引用位置,和混合器一样可形成新的嵌套关系。

引用scss文件会直接插入内容,引用原生css文件则会保留@import在使用时才调用。

用例:

例:当前子目录sass下一个_blue-theme.scss的局部文件,内容为:

aside {
    background: blue;
    color: white;
}

引用:

.blue-theme {@import "sass/blue-theme"}

编译结果:

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

-------------------------------------------------------------------------------------------------------

基础教程到此结束,普通使用已经足够了。

需要详细深入了解看官网完整手册API文档吧~

点赞0
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
youdaanl
 youdaanl 约 1 小时前回复
#164
<a href="http://www.alariscorp.com/converse-star-player-ox-white-shoesi">converse star player ox white</a> <a href="http://www.camerasdallas.com/nike-air-max-flair-femminile-rosa-nero-bianca-scarpej">nike air max flair femminile rosa nero bianca</a> <a href="http://www.limousinhotel.com/adidas-flux-zx-schwarz-and-rose-gold-schuhej">adidas flux zx schwarz and rose gold</a> <a href="http://www.pdenupcial.com/arizona-wildcats-47-ncaa-sachem-47-franchise-cap-hath">arizona wildcats 47 ncaa sachem 47 franchise cap</a> <a href="http://www.lamaisondemma.com/nike-indoor-mercurialx-finale-street-gris-rose-noir-chaussuresh">nike indoor mercurialx finale street gris rose noir</a> <a href="http://www.cwpfloorcare.com/nike-kobe-11-wei%C3%9F-schwarz-schuheh">nike kobe 11 wei脽 schwarz</a>
youdaanl http://www.youdaanl.com/
rexpousa
 rexpousa 约 12 小时前回复
#163
<a href="http://www.rexpousa.com/adidas-zx-750-m%C3%A4nner-gelb-blau-wei%C3%9F-schuheh">adidas zx 750 m盲nner gelb blau wei脽</a> <a href="http://www.dalvadesign.com/yeezy-adidas-all-black-shoesk">yeezy adidas all black</a> <a href="http://www.velvetwifi.com/air-jordan-retro-14-gr%C3%A5-r%C3%B8d-skoj">air jordan retro 14 gr氓 r酶d</a> <a href="http://www.sophiarugby.com/adidas-originals-stan-smith-wei%C3%9F-schuheh">adidas originals stan smith wei脽</a> <a href="http://www.thumbglovepro.com/nike-air-max-thea-beige-white-shoesk">nike air max thea beige white</a> <a href="http://www.ceracustica.com/michael-kors-tan-tote-bag-mkh">michael kors tan tote bag</a>
rexpousa http://www.rexpousa.com/
jupickuplines
 jupickuplines 约 23 小时前回复
#162
<a href="http://www.theskifanatic.com/adidas-springblade-ignite-oro-viola-scarpek">adidas springblade ignite oro viola</a> <a href="http://www.bestoftumblr.com/femmes-asics-gel-lyte-5-violet-jaune-chaussuresh">femmes asics gel lyte 5 violet jaune</a> <a href="http://www.thehogrider.com/prada-diaper-bag-ebay-pradah">prada diaper bag ebay</a> <a href="http://www.artpreneure.com/james-harden-white-jersey-nfli">james harden white jersey</a> <a href="http://www.thefarmergirl.com/adidas-neo-canvas-himmelbl%C3%A5-gr%C3%A5-skol">adidas neo canvas himmelbl氓 gr氓</a> <a href="http://www.shetablink.com/grey-ralph-lauren-swim-shorts-poloh">grey ralph lauren swim shorts</a>
jupickuplines http://www.jupickuplines.com/
escortsue
 escortsue 2019-04-19 06:37回复
#161
<a href="http://www.sguerradesign.com/air-jordan-super-fly-silber-grau-schuhei">air jordan super fly silber grau</a> <a href="http://www.zeneventsja.com/adidas-nmd-runner-gr%C3%BCn-gelb-schuheh">adidas nmd runner gr眉n gelb</a> <a href="http://www.adharaweb.com/nike-zoom-pegasus-31-kvinners-gr%C3%A5-gul-obuvj">nike zoom pegasus 31 kvinners gr氓 gul</a> <a href="http://www.jrelselaw.com/air-jordan-retro-14-arancia-verde-scarpep">air jordan retro 14 arancia verde</a> <a href="http://www.intellalegal.com/nike-air-force-1-noir-turbo-vert-chaussuresh">nike air force 1 noir turbo vert</a> <a href="http://www.carmelscoffee.com/prada-52mm-cat-eye-sunglasses-pradah">prada 52mm cat eye sunglasses</a>
escortsue http://www.escortsue.com/
videogue
 videogue 2019-04-18 09:22回复
#160
<a href="http://www.investicrypto.com/nike-flyknit-trainer-bl%C3%A5-rosa-obuvi">nike flyknit trainer bl氓 rosa</a> <a href="http://www.nattaravnur.com/nike-mercurial-finale-ii-tf-cleats-negro-rosado-zapatosl">nike mercurial finale ii tf cleats negro rosado</a> <a href="http://www.uacheap.com/ray-ban-rb4170-sunglassesh">ray ban rb4170</a> <a href="http://www.sheeradiance.com/detroit-tigers-knit-hatj">detroit tigers knit</a> <a href="http://www.solclimasur.com/maschio-nike-zoom-structure-20nero-grigio-bianca-scarpej">maschio nike zoom structure 20nero grigio bianca</a> <a href="http://www.successlms.com/adidas-tubular-grau-schuhei">adidas tubular grau</a>
videogue http://www.videogue.com/
pragaoviedo
 pragaoviedo 2019-04-17 12:35回复
#159
<a href="http://www.muebleactual.com/adidas-16.3-ic-footbtutti-bianca-arancia-nero-scarpeh">adidas 16.3 ic footbtutti bianca arancia nero</a> <a href="http://www.xfullfilmizle.com/nike-free-trainer-pink-shoesk">nike free trainer pink</a> <a href="http://www.mycryptoverse.com/ray-ban-aviator-3025-buy-online-sunglassesh">ray ban aviator 3025 buy online</a> <a href="http://www.blokistand.com/supra-tk-society-hommes-gris-blanc-chaussuresl">supra tk society hommes gris blanc</a> <a href="http://www.wadeesley.com/adidas-ace-noir-boots-chaussuresl">adidas ace noir boots</a> <a href="http://www.dermonenc.com/nike-shox-deliver-herren-wei%C3%9F-marine-rot-schuhej">nike shox deliver herren wei脽 marine rot</a>
pragaoviedo http://www.pragaoviedo.com/
peddlir
 peddlir 2019-04-17 02:31回复
#158
<a href="http://www.forttr.com/julio-jones-11-atlanta-falcons-jersey-nflh">julio jones 11 atlanta falcons jersey</a> <a href="http://www.chopkinslaw.com/light-bl%C3%A5-l%C3%A6r-converse-obuvi">light bl氓 l忙r converse</a> <a href="http://www.plusbolivia.com/all-pink-adidas-superstar-shoesj">all pink adidas superstar</a> <a href="http://www.ahlivv.com/men-nike-air-max-thea-blue-grey-white-shoesl">men nike air max thea blue grey white</a> <a href="http://www.bybrettbarner.com/white-polo-long-sleeve-t-shirt-poloh">white polo long sleeve t shirt</a> <a href="http://www.timowallets.com/m%C3%A6nd-nike-air-max-2017.5-hvid-sort-skok">m忙nd nike air max 2017.5 hvid sort</a>
peddlir http://www.peddlir.com/
viajesclic
 viajesclic 2019-04-16 17:53回复
#157
<a href="http://www.bazicloob.com/sort-nike-free-run-kvinders-billig-skok">sort nike free run kvinders billig</a> <a href="http://www.malatyabolge.com/nike-air-zoom-pegasus-33-wei%C3%9F-schuheh">nike air zoom pegasus 33 wei脽</a> <a href="http://www.impeachjohn.com/nike-free-run-2-black-and-red-shoesk">nike free run 2 black and red</a> <a href="http://www.dafuqstory.com/nike-air-max-tailwind-8-lilla-skol">nike air max tailwind 8 lilla</a> <a href="http://www.liberezmoi.com/nike-free-3.0-gr%C3%A5-oransje-obuvk">nike free 3.0 gr氓 oransje</a> <a href="http://www.scrutinit.com/maschio-salomon-xt-wings-3-blu-arancia-scarpei">maschio salomon xt wings 3 blu arancia</a>
viajesclic http://www.viajesclic.com/
followjacker
 followjacker 2019-04-16 13:27回复
#156
<a href="http://www.clashopedia.com/nike-mennns-free-5.0-l%C3%B8ping-sko-svart-642198-020-obuvi">nike mennns free 5.0 l酶ping sko svart 642198 020</a> <a href="http://www.adamomacri.com/adidas-womens-gazelle-black-shoesj">adidas womens gazelle black</a> <a href="http://www.waltonranchtx.com/men-nike-air-zoom-structure-18-black-grey-green-orange-shoesl">men nike air zoom structure 18 black grey green orange</a> <a href="http://www.dominickcars.com/polo-ralph-lauren-two-toned-leather-duffel-bag-bloomingdales2-poloh">polo ralph lauren two toned leather duffel bag bloomingdales2</a> <a href="http://www.libertactica.com/lyser%C3%B8d-and-hvid-adidas-zx-flux-skok">lyser酶d and hvid adidas zx flux</a> <a href="http://www.flixzine.com/nike-lab-air-max-2018-m%C3%A4nner-university-rot-schwarz-wei%C3%9F-schuheh">nike lab air max 2018 m盲nner university rot schwarz wei脽</a>
[url=http://www.followjacker.com/]followjacker[/url]
firagandia
 firagandia 2019-04-16 11:00回复
#155
<a href="http://www.matrawildlife.com/hat-stores-in-pittsburgh-pa-hatj">hat stores in pittsburgh pa</a> <a href="http://www.hiyawigs.com/nike-huarache-ultra-femminile-grigio-jack-scarpej">nike huarache ultra femminile grigio jack</a> <a href="http://www.fidgefingers.com/nike-huarache-rosa-and-wei%C3%9F-schuhei">nike huarache rosa and wei脽</a> <a href="http://www.lintvan.com/nike-roshe-run-royal-bl%C3%A5-hvid-3-skoh">nike roshe run royal bl氓 hvid 3</a> <a href="http://www.pubgdust.com/black-customized-youth-limited-nike-nfl-home-oakland-raiders-nike230053-jersey-nfli">black customized youth limited nike nfl home oakland raiders nike230053 jersey</a> <a href="http://www.ahtantalya.com/mennns-nike-internationalist-r%C3%B8d-rosa-obuvk">mennns nike internationalist r酶d rosa</a>
firagandia http://www.firagandia.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸