scss 学习笔记

由于没有办法在网络上找到适合顾客的模板，同时之前自己写css也没有很好的管理方式，最终选择了scss。

Nested 

#main p {
  color: #00ff00;
   97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
》》》》》》》》》》》》》》》》》》》》
#main p {
  color: #00ff00;
   97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

注意被嵌套的写法，尽量不要嵌套太多层，这样在渲染时，会影响性能

引用父选择符： &

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

》》》》》》》》》》》》》》》》》》》》》》》》》》》》
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

嵌套属性

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

》》》》》》》》》》》》》》》》
.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

分开font的属性是比较好管理的，尽管代码多了许多

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

这是个好的处理方式，一般是使用在配搭属性，或tagName

Comments: /* */ and //

/*编译后看到我 */
body { color: black; }

// 你看不到我
a { color: green; }

》》》》》》》》》》》》》》》》
/*编译后看到我 */
body {
  color: black; }

a {
  color: green; }

SassScript

Interactive Shell

不知道。。。

Variables: $

$ 5em;

》》》》》》》》》》》
#main {
   $width;
}

如果你看到！取代$ , 或者 ： 取代 = ：，可以确定那是旧版本的，官方说已被弃用

数据类型

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

• 数字（例如 1.2、13、10px）
• 文本字符串，无论是否有引号（例如 "foo"、'bar'、baz、important）
• 颜色（例如 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，这就是要注意的

Lists

文章说他不常用，那我没好解释这功能了。

运算

所有数据类型都支持等式运算 (== and !=)。 另外，每种数据类型也有其支持的特殊运算符。

数字运算

加 +、减 -、乘 *、除 /和取模 %

数字也支持关系运算（<、>、<=、>=）， 等式运算（==、!=）被所有数据类型支持。

 

除法运算和 /

 

如果你希望在纯 CSS 中使用变量和 /， 你可以用 #{} 包住变量。 例如：

 

颜色运算

 

字符串运算

 

布尔运算

支持布尔值做 and、or 和 not 运算。

List Operations

我看文章一直避开这list功能，也许是好东西，只是解释不了？

圆括号

p {
   (1em + 2em) * 3;
}
》》》》》》》》》》》》》
p {
   9em; }

函数

p {
  color: hsl(0, 100%, 50%);
}
》》》》》》》》》》
p {
  color: #ff0000; }

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
这个也可以编译

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

变量默认值： !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"; }


---------------------------------------
$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

》》》》》》》》》》》》》》》
#main {
  content: "Non-null content"; }

我自己在解释一次，在赋值时，如果有值就不会改变，如果没有值（null）会去找suffix 是！default还赋值

@import

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import "rounded-corners", "text-shadow";

import就和css的一样，scss有多些功能。如果你import “color”，会找到color.scss 或 color.sass

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
>>>>>>>
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了

另个例子：你有个 example.scss

.example {
  color: red;
}

#main {
  @import "example";
}
》》》》》
#main .example {
  color: red;
}

该指令仅允许在文档的基础水平，像@mixin或@charset，未在被@imported嵌套上下文文件允许的。

这是不可能混入或控制指令中嵌套@import。(@ = 指令)

@media

 

@extend

心里准备一下，这个extend只能用心了，没有什么逻辑啦～只好背了。。。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border- 3px;
}
》》》》
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border- 3px;
}

这样设计可以避免bug的出现，如果你要使用seriousError，可以直接调用，因为error和serioursError已经分开了，同时error而赋值于seriourError

如果要扩张，只需对error扩张就行了。如：给error一张背景

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.error {   border: 1px #f00;    } .error.intrusion {   background-image: url("/image/hacked.png"); } .seriousError {   @extend .error;   border- 3px; } 》》》》 .error, .seriousError {   border: 1px #f00;    }   .error.intrusion, .seriousError.intrusion {   background-image: url("/image/hacked.png"); }   .seriousError {   border- 3px; }

　

extend single element　

 

!optional

a.important {
  @extend .notice !optional;
}

如果没有找到.notice 会error，但是加上optional就不会了error了。

@extend in Directives

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border- 3px;
  }
}

》》》》
.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border- 3px;
  }
}

官方解释@media无法知道@media外的css rules。我才可能是先把error给编译好，这时找没有error

@debug 

@warn

@debug 10em + 12em;
》》》》
Line 1 DEBUG: 22em

Control Directives

@if

 

@for

 

@for $var from <start> through <end>

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

@each $var in <list>

@while

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

.item-4 {
   8em; }

.item-2 {
   4em; }

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

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

mixin recursion is forbidden. 被禁止！

Arguments

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
     $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }
》》》》
p {
  border-color: blue;
  border- 1in;
  border-style: dashed; }

@mixin sexy-border($color, $ 1in) {
  border: {
    color: $color;
     $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
》》》》
p {
  border-color: blue;
  border- 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border- 2in;
  border-style: dashed; }

 

@mixin sexy-border($color) {
  &:focus {
    border-color: $color;
    outline: 0;
    box-shadow: rgba(red($color), green($color), blue($color), .6);
  }
}
p { @include sexy-border(#66afe9); }
》》》》
p:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: rgba(102, 175, 233, 0.6); }

 

 

Keyword Arguments

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $ 2in); }

在给变量时，可以知道是什么变量。

Variable Arguments

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

Variable Scope and Content Blocks（暂时理解不了）

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

#sidebar {
  $sidebar- 300px;
   $sidebar-width;
  @include smartphone {
     $sidebar-width / 3;
  }
}

Function Directives

$grid- 40px;
$gutter- 10px;

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

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

Output Style

:nested

:expanded

:compact

:compressed

　　　

转自：https://www.cnblogs.com/stooges/p/4691733.html