The html-css from wuzinong

sass

from http://www.w3cplus.com
1.变量申明 $color:red
应用：
body{
color:$color;
}
*在有全局变量的情况下，sass是没有局部变量的。意思是如果要看到sass的局部变量，请不要设置全局变
e.g1: $color:red; p{ $color:blue; color:$color;//blue } a{ color:$color;//blue }
eg2: p{ $color:blue; color:$color;//blue } a{ color:$color;//$color未定义 }
eg3:

   p{ 
$color:blue;
 color:$color;//blue
 a{ 
$color:red; 
color:$color;//red
 } 
   background-color:$color;//red 
     span{ color:$color;//red
 }
 } 
div{ color:$color;//$color未定义 }

*变量用#{} 包裹（变量用在属性或选择器上）

     $btnClass: btn !default; 
     $borderDirection: top !default; 
     .#{$btnClass}{ 
        border-#{$borderDirection}:1px solid #ccc;
    }

*多个变量一起申明

    $linkColor: red blue !default; 
    a{
           color:nth($linkColor,1); 
          &:hover{ 
            color:nth($linkColor,2);
            }
    }

2.获取上一层节点：&
body{
div{
color:red;
&:hover{
color:blue;
}
}
}
默认值：!default
e.g:无default:

 $color:red;
 $color:blue; 
p{ color:$color;//blue }

e.g:有default

 $color:red; 
 $color:blue !default; 
 p{ color:$color;//red }

3.mixin
@mixin Mixins名（$参数名：默认参数值）{ /样式规则/ }
e.g:
定义mixin
@mixin error($borderWidth:2px)
{
border: $borderWidth solid #f00;
color: #f00;
}
调用mixin
.generic-error {
@include error();
}
.login-error {
@include error(3px);
}
关于mixin传递多个变量 ...符

 @mixin box-shadow($shadow...)
   { 
      -webkit-box-shadow:
  $shadow; -moz-box-shadow:
   $shadow; box-shadow:$shadow;
 }
 如box-shadow:0 0 3px rgba(0,0,0,0.3),inset 0 0 3px rgba(255,255,255,0.3);
.shadow2{ 
  @include box-shadow(0 0 5px rgba(0,0,0,.3),inset 0 0 3px rgba(255,255,255,.5));//
  }

*无参版mixin及import mixin

  @mixin center-block {
        margin-left: auto; 
        margin-right: auto; 
  }

@import 'mixin'; 
#header{ width:1000px; @include center-block; } 
.gallery{ width:600px; @include center-block; }

*使用if

$lte7:true !default;//是否兼容ie6,7 // inline-block // ie6-7 *display: inline;*zoom:1; 
@mixin inline-block { 
display: inline-block; 
@if $lte7 { *display: inline;*zoom:1; }
 }

4.继承 @extend
.block { margin: 10px 5px; padding:2px; }
p {
@extend .block;/继承.block选择器下所有样式/
border: 1px solid #eee;
text-transform: uppercase;
}
如果不想要单独抽出一个类：使用%
%block
{
margin: 10px 5px;
padding: 2px;
}

p {
@extend %block;
border: 1px solid #eee;
}

@include 不会合并相同的样式
@extends 会合并相同的样式
%placeholder (e.g: @extends %commonStyle ) 会合并相同的样式

5. @content
@mixin调用的时候是这样的@include mixin-name($var1,$var2,...,$varn)，
@content的调用的时候是这样的@include mixin-name{}
大括号里面就是@content表示的内容，里面css样式随便你写

   @mixin header{ #header{ @content; } } 
   调用：
   @include header{ width:1000px; height:200px; .logo{ width:200px; } }
   编译后：
    #header { width: 1000px; height: 200px; } #header .logo { width: 200px; }

6. % 作为占位选择器来用（直接@extend .className 会生成.className 而%不会）

7. @function
与@mixin，%这两者的第一点不同在于sass本身就有一些内置的函数，方便我们调用，如强大的color函数；其次就是它返回的是一个值，而不是一段css样式代码什么的。
quote :http://sass-lang.com/documentation/Sass/Script/Functions.html

8. 三目判断（if($condition, $if-true, $if-false)）

   if(true, 1px, 2px) => 1px
   if(false, 1px, 2px) => 2px

9.@if
*if else 判断

   $filter:false !default; //是否开启ie滤镜 //背景色半透明
   @mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){ 
        color:#fff; 
     @if $filter{ filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}'); }
    @else{ background-color: #333; } background-color:$bgcolor; }

*not,or,and分别表示非，或，与用==,!=分别表示等于与不等于

$radius: 5px !default;
.box-border{
border:1px solid #ccc; padding:10px;
@if $radius != 0{ border-radius:$radius; }
}
$sizeClass: small !default;
.size{
@if $sizeClass == 'small'{ padding:5px; }
@else{ padding:10px; }
}

10. @for
or循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

11.@each

@each $animal in puma, sea-slug, egret, salamander { 
.#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }
 }

$sprite: puma sea-slug egret salamander !default; 
%sprite-animal{ background: url('/images/animal.png') no-repeat; } 
@each $animal in $sprite { .#{$animal}-icon { @extend %sprite-animal; background-position:0 -(index($sprite,$animal)*30px); } }

12.@at-root
需要嵌套块并将其移到根一级

.foo { 
      @at-root .bar { color: gray; } 
}
 /*   CSS */ 
.bar { color: gray; }

13.@while
@whild指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。


$types: 4; 
$type-width: 20px; 
@while $types > 0 { 
.while-#{$types} 
{ width: $type-width + $types; } 
$types: $types - 1;
 }

wuzinong / html-css Goto Github PK

html-css's People

Contributors

Watchers

html-css's Issues

sass

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs