scss 学习笔记

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

Nested

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

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
》》》》》》》》》》》》》》》》》》》》
#main p {
  color: #00ff00;
  width: 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: $

$width: 5em;

》》》》》》》》》》》
#main {
  width: $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 !=)。 另外，每种数据类型也有其支持的特殊运算符。

数字运算

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

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

p {
  width: 1in + 8pt;
}

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

p {
  width: 1.111in; }

除法运算和 /

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};
}
》》》》》》》》》》》》》
p {
  font: 12px/30px; }

颜色运算

p {
  color: #010203 + #040506;
}
》》》》》》》
p {
  color: #050709; }
-----------------------

p {
  color: #010203 * 2;
}
》》》》》》》
p {
  color: #020406; }

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

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
》》》》》》》
p {
  color: rgba(255, 255, 0, 0.75); }

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

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
》》》》》》》
p {
  color: rgba(255, 0, 0, 0.9);
  background-color: rgba(255, 0, 0, 0.25); }

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

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}
》》》》》》》
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

字符串运算

p {
  cursor: e + -resize;
}
》》》》》》》》》》》
p {
  cursor: e-resize; }

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

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

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

p {
  margin: 3px + 4px auto;
}
》》》》》》》》》》》
p {
  margin: 7px auto; }

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

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

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

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
》》》》》》》》》》》
p:before {
  content: "I ate  pies!"; }

布尔运算

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

List Operations

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

圆括号

p {
  width: (1em + 2em) * 3;
}
》》》》》》》》》》》》》
p {
  width: 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

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
》》》》》
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

-------

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
》》》》》
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

------

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
》》》》》
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

心里准备一下，这个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;
}

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

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

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

　

extend single element　

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
>>>>
a:hover, .hoverlink {
  text-decoration: underline; }

----

.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;
}
>>>>
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

----

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
>>>>
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

----

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
>>>>
a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

----

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}
>>>>
#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

----

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}
>>>>
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

----

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}
>>>>
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

!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-width: 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-width: 3px;
  }
}

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

@debug 

@warn

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

Control Directives

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

@for

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

@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} { width: 2em * $i; }
  $i: $i - 2;
}
》》》》
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 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: $width;
    style: dashed;
  }
}

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

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

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

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

Keyword Arguments

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 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-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

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

Output Style

:nested

:expanded

:compact

:compressed