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; }