scss学习笔记

1、引用父选择符： &

#main {

  color: black;

  a {

    font-weight: bold;

    &:hover { color: red; }

  }

}

2、font:2px/3px 代表字体大小2px 且 line-height:3px

.funky {

  font: 2px/3px {

    family: fantasy;

    size: 30em;

    weight: bold;

  }

}

3、Placeholder Selectors: %foo

//如果没有找到%extreme，就不会编译出东西

#context a%extreme {

  color: blue;

  font-weight: bold;

  font-size: 2em;

}

//。notice 或者#notice 都可以接受

.notice {

  @extend %extreme;

}

// ---------编译为-------

#context a.notice {

  color: blue;

  font-weight: bold;

  font-size: 2em; }

4、Variables: $

$width: 5em;

》》》》》》》》》》》

#main {

  width: $width;

}

/*

　　SassScript 支持六种主要的数据类型：

　　数字（例如 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）

*/

字符串

　　虽然说可以接受“”或没有引号，但在编译#{}时，就例外，这要注意

@mixin firefox-message($selector) {

  body.firefox #{$selector}:before {

    content: "Hi, Firefox users!";

  }

}

@include firefox-message(".header");

》》》》》》》》》》》》》》

body.firefox .header:before {

  content: "Hi, Firefox users!"; }

如果没有给引号，就error，因为.header 是class，而文本都是string，这就是要注意的

5、Interpolation: #{}

$name: foo;

$attr: border;

p.#{$name} {

  #{$attr}-color: blue;

}

//--------------------------------

p.foo {

  border-color: blue; }

p {

  $font-size: 12px;

  $line-height: 30px;

  font: #{$font-size}/#{$line-height};

}

// -----------------------------------

p {

  font: 12px/30px; }

6、变量默认值： !default

　　你可以在变量尚未赋值前，通过在值的末尾处添加 !default 标记来为其指定。也就是说，如果该变量已经被赋值，就不会再次赋值，但是，如果还没有被赋值，就会被指定一个值。

$content: "First content";

$content: "Second content?" !default;

$new_content: "First time reference" !default;

#main {

  content: $content;

  new-content: $new_content;

}

//-------------------------------------------------------------

#main {

  content: "First content";

  new-content: "First time reference"; }

7、 @import 可引入多个 @import "rounded-corners", "text-shadow";

嵌套 @import

For example, if example.scss contains

.example {

  color: red;

}

then

#main {

  @import "example";

}

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

#main .example {

  color: red;

}

8 、 @media 媒体查询

.sidebar {

  width: 300px;

  @media screen and (orientation: landscape) {

    width: 500px;

  }

}

//----------------------------------------------------------

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {

  .sidebar {

    width: 500px; } }

9、@extend

.error {

  border: 1px #f00;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

//-----------------------------------------

.error, .seriousError {

  border: 1px #f00;

  background-color: #fdd;

}

.seriousError {

  border-width: 3px;

}

//------------------------------exp 2------------

.error {

  border: 1px #f00;

  background-color: #fdd;

}

.error.intrusion {

  background-image: url("/image/hacked.png");

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

//-----------------------------------------------

.error, .seriousError {

  border: 1px #f00;

  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {

  background-image: url("/image/hacked.png"); }

.seriousError {

  border-width: 3px; }

// exp 3

.hoverlink {

  @extend a:hover;

}

.comment a.user:hover {

  font-weight: bold;

}

// ---------------------------------------------

.comment a.user:hover, .comment .user.hoverlink {

  font-weight: bold; }

.error {

  border: 1px #f00;

  background-color: #fdd;

}

.attention {

  font-size: 3em;

  background-color: #ff0;

}

.seriousError {

  @extend .error;

  @extend .attention;

  border-width: 3px;

}

10、@if

p {

  @if 1 + 1 == 2 { border: 1px solid;  }

  @if 5 < 3      { border: 2px dotted; }

  @if null       { border: 3px double; }

}

》》》》

p {

  border: 1px solid; }

----

$type: monster;

p {

  @if $type == ocean {

    color: blue;

  } @else if $type == matador {

    color: red;

  } @else if $type == monster {

    color: green;

  } @else {

    color: black;

  }

}

》》》》

p {

  color: green; }

11、@for

@for $i from 1 through 3 {

  .item-#{$i} { width: 2em * $i; }

}

》》》》

.item-1 {

  width: 2em; }

.item-2 {

  width: 4em; }

.item-3 {

  width: 6em; }

12、@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'); }

13、@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; }

14、Mixin Directives

@mixin large-text {

  font: {

    family: Arial;

    size: 20px;

    weight: bold;

  }

  color: #ff0000;

}

.page-title {

  @include large-text;

  padding: 4px;

  margin-top: 10px;

}

》》》》

.page-title {

  font-family: Arial;

  font-size: 20px;

  font-weight: bold;

  color: #ff0000;

  padding: 4px;

  margin-top: 10px; }

@mixin silly-links {

  a {

    color: blue;

    background-color: red;

  }

}

@include silly-links;

》》》》

a {

  color: blue;

  background-color: red; }

15、Arguments

@mixin sexy-border($color, $width) {

  border: {

    color: $color;

    width: $width;

    style: dashed;

  }

}

p { @include sexy-border(blue, 1in); }

》》》》

p {

  border-color: blue;

  border-width: 1in;

  border-style: dashed; }

@mixin box-shadow($shadows...) {

  -moz-box-shadow: $shadows;

  -webkit-box-shadow: $shadows;

  box-shadow: $shadows;

}

.shadows {

  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);

}

》》》》

.shadows {

  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

}

@mixin colors($text, $background, $border) {

  color: $text;

  background-color: $background;

  border-color: $border;

}

$values: #ff0000, #00ff00, #0000ff;

.primary {

  @include colors($values...);

}

》》》》

.primary {

  color: #ff0000;

  background-color: #00ff00;

  border-color: #0000ff;

}

Passing Content Blocks to a Mixin

@mixin apply-to-ie6-only {

  * html {

    @content;

  }

}

@include apply-to-ie6-only {

  #logo {

    background-image: url(/logo.gif);

  }

}

》》》》

* html #logo {

  background-image: url(/logo.gif);

}

$color: white;

@mixin colors($color: blue) {

  background-color: $color;

  @content;

  border-color: $color;

}

.colors {

  @include colors { color: $color; }

}

》》》》

.colors {

  background-color: blue;

  color: white;

  border-color: blue;

}

16、Function Directives

$grid-width: 40px;

$gutter-width: 10px;

@function grid-width($n) {

  @return $n * $grid-width + ($n - 1) * $gutter-width;

}

#sidebar { width: grid-width(5); }

//#sidebar { width: grid-width($n: 5); }

>>>>

#sidebar {

  width: 240px; }

巴特西

scss学习笔记

Passing Content Blocks to a Mixin

最新文章

热门文章