码迷,mamicode.com
首页 > Web开发 > 详细

scss 学习笔记

时间:2015-07-31 19:58:04      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:

由于没有办法在网络上找到适合顾客的模板,同时之前自己写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.21310px
  • 文本字符串,无论是否有引号(例如 "foo"‘bar‘baz、important
  • 颜色(例如 blue#04a3f9rgba(255, 0, 0, 0.5)
  • 布尔值(例如 truefalse
  • 空值(例如 null
  • 值列表,用空格或逗号分隔(例如 1.5em 1em 0 2emHelvetica, 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; }
View Code
除法运算和 /
技术分享
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; }
View Code

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

技术分享
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
》》》》》》》》》》》》》
p {
  font: 12px/30px; }
View Code

 

颜色运算

技术分享
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);
}
View Code

 

字符串运算

技术分享
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!"; }
View Code

布尔运算

支持布尔值做 andor 和 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; } }
View Code

 

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

 

!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; }
View Code

@for

技术分享
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
》》》》
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }
View Code
@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; }

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

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 





scss 学习笔记

标签:

原文地址:http://www.cnblogs.com/stooges/p/4691733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!