好!欢迎访问迷津渡口 现在时间是: 天气 °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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
badacamshotel
 badacamshotel 2019-02-15 21:35回复
#70
<a href="http://www.daddeaze.com/billig-air-jordan-3-menns-gull-runninge">billig air jordan 3 menns gull</a> <a href="http://www.debracousins.com/jordan-3-true-bl%C3%A5-grade-school-schuhea">jordan 3 true bl氓 grade school</a> <a href="http://www.yankaripark.com/air-jordan-ultra-fly-violet-or-scarpeb">air jordan ultra fly violet or</a> <a href="http://www.yicailottery.com/nike-air-max-2019-green-uk-shoeso">nike air max 2019 green uk</a> <a href="http://www.calebcraw.com/asics-tiger-gel-lyte-v-noir-kurpesb">asics tiger gel lyte v noir</a> <a href="http://www.liquidputter.com/nike-sb-v-rod-dark-loden-sport-red-zapatost">nike sb v rod dark loden sport red</a>
badacamshotel http://www.badacamshotel.com/
toockbespoke
 toockbespoke 2019-02-15 14:32回复
#69
<a href="http://www.frugstore.com/nike-air-max-95-jacquard-wei%C3%9F-noise-kurpesa">nike air max 95 jacquard wei脽 noise</a> <a href="http://www.partyhubuk.com/nike-free-trainer-5.0-nkg-herren-schwarz-butyg">nike free trainer 5.0 nkg herren schwarz</a> <a href="http://www.unclicprod.com/nike-black-marquis-haynes-backer-nfl-98-carolina-panthers-long-sleeve-t-shirt-nflw">nike black marquis haynes backer nfl 98 carolina panthers long sleeve t shirt</a> <a href="http://www.xoplanetmedia.com/kobe-9-vert-quarter-butyd">kobe 9 vert quarter</a> <a href="http://www.atemspende.com/nike-roshe-run-speckle-pattern-blau-whtie-kurpesc">nike roshe run speckle pattern blau whtie</a> <a href="http://www.boluposter.com/ralph-lauren-m%C3%A4nner-marine-polo-chinos-in-loose-fit-polos">ralph lauren m盲nner marine polo chinos in loose fit</a>
toockbespoke http://www.toockbespoke.com/
atolyekarinca
 atolyekarinca 2019-02-15 07:51回复
#68
<a href="http://www.cheapcoatsfr.com/nike-new-england-patriots-5-tim-tebow-white-elite-jersey-nflg">nike new england patriots 5 tim tebow white elite jersey</a> <a href="http://www.mylinkstv.com/nike-huarache-ultra-lemon-zest-runningf">nike huarache ultra lemon zest</a> <a href="http://www.phxfam.com/nfl-pittsburgh-steelers-color-rush-limited-antonio-brown-mens-football-jersey-nflv">nfl pittsburgh steelers color rush limited antonio brown mens football jersey</a> <a href="http://www.shanibazaar.com/nike-lebron-13-white-kitchen-trainersa">nike lebron 13 white kitchen</a> <a href="http://www.imannequins.com/nike-free-herre-lyser%C3%B8d-scarpec">nike free herre lyser酶d</a> <a href="http://www.irentevent.com/nike-pegasus-32-femminile-blu-mac-kurpesc">nike pegasus 32 femminile blu mac</a>
[url=http://www.atolyekarinca.com/]atolyekarinca[/url]
myfoxbeaumont
 myfoxbeaumont 2019-02-15 01:17回复
#67
<a href="http://www.jljingshi.com/kobe-10-schwarzout-kaufen-butya">kobe 10 schwarzout kaufen</a> <a href="http://www.emanmoon.com/air-jordan-12-guld-keys-schuheg">air jordan 12 guld keys</a> <a href="http://www.mysiatravel.com/kvinders-ralph-lauren-city-polo-lyser%C3%B8d-gr%C3%A5-poloz">kvinders ralph lauren city polo lyser酶d gr氓</a> <a href="http://www.pandoraboxhn.com/nike-flyknit-lunar-laser-naranja-chaussuresa">nike flyknit lunar laser naranja</a> <a href="http://www.yourctt.com/air-jordan-retro-10-bambini-rosso-grigio-schuhee">air jordan retro 10 bambini rosso grigio</a> <a href="http://www.coccodesigns.com/nike-air-max-1-femmes-violet-orange-scarpea">nike air max 1 femmes violet orange</a>
myfoxbeaumont http://www.myfoxbeaumont.com/
thecardplayer
 thecardplayer 2019-02-14 18:21回复
#66
<a href="http://www.ortzproducts.com/nike-air-max-90-womens-gold-blue-shoesh">nike air max 90 womens gold blue</a> <a href="http://www.cooterscamera.com/air-max-2017-nero-oro-scarpei">air max 2017 nero oro</a> <a href="http://www.marjalfun.com/nike-air-max-tn-dam%C3%A4nner-gelb-lila-schuhej">nike air max tn dam盲nner gelb lila</a> <a href="http://www.alecsblog.com/san-diego-padres-new-era-2018-mlb-mexico-series-low-profile-59fifty-cap-hath">san diego padres new era 2018 mlb mexico series low profile 59fifty cap</a> <a href="http://www.troudumonde.com/femmes-nike-air-max-tailwind-5-violet-rouge-chaussuresh">femmes nike air max tailwind 5 violet rouge</a> <a href="http://www.smilesdrdavid.com/air-jordan-retro-31-bianca-verde-scarpeq">air jordan retro 31 bianca verde</a>
thecardplayer http://www.thecardplayer.com/
thecardplayer
 thecardplayer 2019-02-14 13:57回复
#65
<a href="http://www.theislandbody.com/north-face-gore-tex-xcr-summit-series-jacket-northfaceh">north face gore tex xcr summit series jacket</a> <a href="http://www.zululeads.com/nike-zoom-structure-18-dam%C3%A4nner-gelb-gr%C3%BCn-schuhej">nike zoom structure 18 dam盲nner gelb gr眉n</a> <a href="http://www.notmyrichie.com/adidas-gazelle-boost-himmelbl%C3%A5-gul-skoh">adidas gazelle boost himmelbl氓 gul</a> <a href="http://www.mintyschoice.com/femmes-nike-flynit-air-max-or-bleu-chaussuresh">femmes nike flynit air max or bleu</a> <a href="http://www.mamapjblog.com/maryland-terrapins-top-of-the-world-ncaa-grinder-adjustable-cap-hatl">maryland terrapins top of the world ncaa grinder adjustable cap</a> <a href="http://www.pdfunicorn.com/femmes-nike-roshe-run-hyp-rose-violet-chaussuresh">femmes nike roshe run hyp rose violet</a>
thecardplayer http://www.thecardplayer.com/
myvetsbest
 myvetsbest 2019-02-11 15:17回复
#64
<a href="http://www.alpigap.com/nike-free-run-3-himmelen-bl%C3%A5-s%C3%B8lv-chaussuresa">nike free run 3 himmelen bl氓 s酶lv</a> <a href="http://www.dinerwareslo.com/nike-mercurial-vapor-ix-negro-quarterback-butya">nike mercurial vapor ix negro quarterback</a> <a href="http://www.eskortpu.com/nike-air-force-1-jaune-and-noir-man-butyc">nike air force 1 jaune and noir man</a> <a href="http://www.maribrairie.com/nike-flyknit-air-max-voltage-verde-for-venta-obuvf">nike flyknit air max voltage verde for venta</a> <a href="http://www.myfaccia.com/nike-lebron-soldier-10-rosado-kurpesa">nike lebron soldier 10 rosado</a> <a href="http://www.noteablepost.com/dam%C3%A4nner-air-max-90-sneakerboot-rosa-wei%C3%9F-kurpese">dam盲nner air max 90 sneakerboot rosa wei脽</a>
myvetsbest http://www.myvetsbest.com/
prada waist bag
 prada waist bag 2019-02-11 07:05回复
#63
<a href="http://www.loichucviet.com/nike-kaishi-navy-blue-sneakers-skot">nike kaishi navy blue sneakers</a> <a href="http://www.awtaanews.com/air-max-nike-white-foot-locker-trainerse">air max nike white foot locker</a> <a href="http://www.novoestupino.com/nike-air-flight-89-fl%C3%A5den-bl%C3%A5-view-chaussuresa">nike air flight 89 fl氓den bl氓 view</a> <a href="http://www.tvusvslive.com/billig-adidas-falcon-elite-herre-gr%C3%A5-footf">billig adidas falcon elite herre gr氓</a> <a href="http://www.barborayoga.com/v-neck-polo-t-shirts-for-hombres-polo_m">v neck polo t shirts for hombres</a> <a href="http://www.jkpblog.com/elite-nike-green-youth-shaq-thompson-jersey-nfl-54-carolina-panthers-salute-to-service-nflt">elite nike green youth shaq thompson jersey nfl 54 carolina panthers salute to service</a>
prada waist bag http://www.davidtraina.com/prada-waist-bag-pradar
keleric
 keleric 2019-02-10 16:17回复
#62
<a href="http://www.truthtapes.com/air-jordan-retro-13-maschiota-verde-rosso-scarpeh">air jordan retro 13 maschiota verde rosso</a> <a href="http://www.veskopetrov.com/femminile-air-jordan-retro-9-tutti-gituttio-scarpei">femminile air jordan retro 9 tutti gituttio</a> <a href="http://www.kaosmotogp.com/nike-air-max-90-infrarot-finish-line-schuheh">nike air max 90 infrarot finish line</a> <a href="http://www.doularhythms.com/kyrie-1-green-gold-shoesq">kyrie 1 green gold</a> <a href="http://www.animalpainvet.com/nike-cleveland-browns-2-johnny-manziel-brown-orange-fadeaway-elite-jersey-nfli">nike cleveland browns 2 johnny manziel brown orange fadeaway elite jersey</a> <a href="http://www.texarillo.com/mennns-asics-gel-quantum-360-gr%C3%B8nn-gul-obuvp">mennns asics gel quantum 360 gr酶nn gul</a>
keleric http://www.keleric.com/
thegillssell
 thegillssell 2019-02-10 11:28回复
#61
<a href="http://www.profancyshop.com/nike-kobe-10-elite-tout-rouge-chaussuresh">nike kobe 10 elite tout rouge</a> <a href="http://www.lmcgroep.com/nike-flyknit-lunar-3-femminile-gituttio-grigio-scarpeq">nike flyknit lunar 3 femminile gituttio grigio</a> <a href="http://www.nowaitnails.com/air-jordan-super-fly-red-shoesj">air jordan super fly red</a> <a href="http://www.xmrujo.com/nike-air-max-cb34-wolf-gr%C3%A5-skoi">nike air max cb34 wolf gr氓</a> <a href="http://www.sevenguard.com/nike-lebron-zoom-soldier-6-rosso-scarpel">nike lebron zoom soldier 6 rosso</a> <a href="http://www.escortsue.com/womens-nike-air-huarache-light-gold-pink-shoesj">womens nike air huarache light gold pink</a>
thegillssell http://www.thegillssell.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸