sass认识

来源：互联网发布：画平面图软件编辑：程序博客网时间：2024/06/13 10:01

sass的安装

http://www.yiibai.com/sass/sass_installation.html
介绍了安装sass的过程，但是值的注意的是在装好ruby以后只需要在命令行执行gem install sass就可以安装sass 检测是否安装好sass -v
scss的简单使用页在上述的网页中。

Sass的特色

完全兼容css3
在css语言的基础上增加变量、嵌套、混合等功能
通过波函数进行颜色值和属性值的运算
提供控制指令等个高级功能
自定义输出格式

cSS的扩展

在sass中完全支持css

嵌套表示父级和子级的关系

sass

#mian p{  color:#00ff00;  width:97%;  .redbox{      background: #ff0000;     color: #000000;  }

css

#mian p {  color: #00ff00;  width: 97%; }#mian p .redbox {    background: #ff0000;    color: #000000; }

引用父选择器&

sass

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

css

a {  font-weight: bold;  text-decoration: none; }  a:hover {    text-decoration: underline; }    body.fire a:hover {      font-weight: normal; }```、<div class="se-preview-section-delimiter"></div>嵌套属性----针对css中有一些属性遵循相同的命名空间，比如font-family   font-weight等sass<div class="se-preview-section-delimiter"></div>

.funk{
font:{
family: normal;
size: 30px;
weight: bold;
}
}

css<div class="se-preview-section-delimiter"></div>

.funk {
font-family: normal;
font-size: 30px;
font-weight: bold; }

<div class="se-preview-section-delimiter"></div>sass的脚本=======<div class="se-preview-section-delimiter"></div>变量：$----sass<div class="se-preview-section-delimiter"></div>

$width:300px;

main{

width: $width;
}

css<div class="se-preview-section-delimiter"></div>

main {

width: 300px; }

<div class="se-preview-section-delimiter"></div>sass支持的数据类型-----------数字、文本字符、颜色（blue #000000  rgba(三个参数)）布尔值 、空值（null）、值列表（1.5px 1em 0 2em）maps   从一个值映射到另一个**字符串**使用  #{} interpolation（插值）时，将带引号的字符串编译为不带引号的字符串**@mixin**定义函数的一个关键字  #{变量}   在函数中使用传进来的变量sass<div class="se-preview-section-delimiter"></div>

@mixin firefox-message(selector){
body.firefox #{selector}:before{
content: “sjaisaj”;
}
}
@include firefox-message(“.header”)

css<div class="se-preview-section-delimiter"></div>

body.firefox .header:before {
content: “sjaisaj”; }

<div class="se-preview-section-delimiter"></div>插值#{}的使用--------sass<div class="se-preview-section-delimiter"></div>

name:”header”;age:”border”;
p .#{name} {
#{age}-color:blue;
}

css<div class="se-preview-section-delimiter"></div>

p .header {
border-color: blue; }

<div class="se-preview-section-delimiter"></div>控制和指令=====<div class="se-preview-section-delimiter"></div>@import指令---------@import "foo.css"@import "foo"@import "http://foo.com/bar"@import  url(foo)@import指令可以被嵌套example.scss<div class="se-preview-section-delimiter"></div>

.example{
color: red;
}

style.scss<div class="se-preview-section-delimiter"></div>

main{

@import “example”;
}

成为了css文件<div class="se-preview-section-delimiter"></div>

main .example {

color: red; }

<div class="se-preview-section-delimiter"></div>@media指令--------这个之林如果被嵌套在一个类里边，会自动浮动到顶层，带着嵌套它的类，这样会打破书写流应该这样写scss<div class="se-preview-section-delimiter"></div>

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

css<div class="se-preview-section-delimiter"></div>

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

<div class="se-preview-section-delimiter"></div>@extend指令---------**扩展选择器**@extend通过在样式表中    出现被扩展选择器（.error）的地方插入例如了扩展选择器(.serious)sass文件<div class="se-preview-section-delimiter"></div>

.error{
border: 1px #f00;
background-color: #fdd;
}
.serious{
@extend .error;
border-width: 3px;
}
.error .instrusion{
font-weight: bold;
}

css文件<div class="se-preview-section-delimiter"></div>

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

.serious {
border-width: 3px; }

.error .instrusion, .serious .instrusion {
font-weight: bold; }

**多重扩展**scss<div class="se-preview-section-delimiter"></div>

.error{
border: 1px #f00;
background-color: #fdd;
}
.attention{
font-size: 3em;
background-color: #ff0;
}
.serions{
@extend .error;
@extend .attention;
border-width: 3px;
}

css<div class="se-preview-section-delimiter"></div>

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

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

.serions {
border-width: 3px; }

**链式扩展**scss<div class="se-preview-section-delimiter"></div>

.error{
border: 1px #f00;

}
.serions{
@extend .error;
border-width: 3px;
}
.cirticl{
@extend .serions;
background-color: #fdd;
}

css<div class="se-preview-section-delimiter"></div>

.error, .serions, .cirticl {
border: 1px #f00; }

.serions, .cirticl {
border-width: 3px; }

.cirticl {
background-color: #fdd; }

<div class="se-preview-section-delimiter"></div>控制指令和表达式========<div class="se-preview-section-delimiter"></div>@if和@else指令-----------<div class="se-preview-section-delimiter"></div>

type:monster;
   p{
     @iftype==ocean{
color: blue;
}@else if type==matadorcolor:red;@elseiftype==monster{
color:green;
}
}

编译后的css<div class="se-preview-section-delimiter"></div>

p {
color: green; }

<div class="se-preview-section-delimiter"></div>@for指令------重复的输入一组样式，@for $var from <start>  through <end>  start和end都包括@for $var from <start>  to<end>    不包括end<div class="se-preview-section-delimiter"></div>

@for i from 1 through 3{
.item-#{i}{
width: 200px;
}
}

css<div class="se-preview-section-delimiter"></div>

.item-1 {
width: 200px; }

.item-2 {
width: 200px; }

.item-3 {
width: 200px; }

<div class="se-preview-section-delimiter"></div>@each指令-------格式：   @each in puma,dsds,dsds,{}<div class="se-preview-section-delimiter"></div>

@each ema in puma,sasa,sas,ffd{
.#{ema}-icon{
font-size: 20px;
}
}

css<div class="se-preview-section-delimiter"></div>

.puma-icon {
font-size: 20px; }

.sasa-icon {
font-size: 20px; }

.sas-icon {
font-size: 20px; }

.ffd-icon {
font-size: 20px; }

**多重赋值**<div class="se-preview-section-delimiter"></div>

@each animal,color,cursor in (puma,black,default),(sea-slug,blue,pointer,),(egret,white,move){
.#{animal}{
color: color;cursor:cursor;
}
}

css<div class="se-preview-section-delimiter"></div>

.puma {
color: black;
cursor: default; }

.sea-slug {
color: blue;
cursor: pointer; }

.egret {
color: white;
cursor: move; }

<div class="se-preview-section-delimiter"></div>@while指令--------<div class="se-preview-section-delimiter"></div>

i:6;@whilei>0{
.item-#{i}{
      width: $i*2em;
    }i:$i - 2;
}

注意减号的两边都有空格css<div class="se-preview-section-delimiter"></div>

.item-6 {
width: 12em; }

.item-4 {
width: 8em; }

.item-2 {
width: 4em; }
“`

@mixin混入指令

混入指令允许您定义在整个样式表中重复使用的样式

@mixin混入指令

混入指令允许您定义在整个样式表中重复使用的样式，可以将经常使用的命令组合为一个@mixin

@mixin large-text{  font:{    family: Arial;    size: 20px;    weight: bold;  };  color: #ff0000;}.page_title{     @include large-text;}

css

.page_title {  font-family: Arial;  font-size: 20px;  font-weight: bold;  color: #ff0000; }

混合样式的嵌套

@mixin large-text{  font:{    family: Arial;    size: 20px;    weight: bold;  };  color: #ff0000;}@mixin cc{    p{      color: red;    }}.page_title{  @include large-text;  @include  cc}

css

.page_title {  font-family: Arial;  font-size: 20px;  font-weight: bold;  color: #ff0000; }  .page_title p {    color: red; }

为混合命令传入参数

@mixin sex-border($color,$width){     border: {       width: $width;       color: $color;     };}p{  @include sex-border(blue,10px)}

css

p {  border-width: 10px;  border-color: blue; }

为混入指令传入可变参数

@mixin sex-shadow($shadows...){     -moz-box-shadow: $shadows;     -webkit-box-shadow: $shadows;     box-shadow: $shadows;}.shadows{    @include sex-shadow(0px 4px 5px #666,2px 6px 10px #999)}

css

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

将列表和map传递给混入指令

@mixin colors($text,$background,$border){    color: $text;background-color: $background;border-color: $border;}$values:#ff0000,#00ff00,#0000ff;.primary{  @include colors($values...);};$value-map:(text:#00ff00,background:#0000ff,border:#ff0000);.seconda{   @include colors($value-map...)}

css代码

.primary {  color: #ff0000;  background-color: #00ff00;  border-color: #0000ff; }.seconda {  color: #00ff00;  background-color: #0000ff;  border-color: #ff0000; }

@content指令

内容快指令，这个指令可以被抽象的定义为，

@mixin apply-to-ie6-only{    p {      @content;    }}@include apply-to-ie6-only{  #logo{    background-color:red;  }}

在后边使用的时候才指定了内容区的内容

p #logo {  background-color: red; }

函数指令

@function 和@return

$a:20px;$b:30px;@function gird-width($n){   @return $n * $a+$b * ($n - 1)}.sider{    width:gird-width(5);}

css

.sider {  width: 220px; }

注意：不希望由sass生成css的我文件使用_fileName.scss来命名

0 0