sass认识

最新推荐文章于 2022-09-21 19:00:47 发布

原创最新推荐文章于 2022-09-21 19:00:47 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

sass 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了Sass的安装步骤及特色，详细解释了如何利用Sass进行嵌套、变量定义、混合使用等功能，并展示了控制指令和表达式的具体用法。

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{ @if$ type==ocean{
color: blue;
}@else if $type==matador{ color:red; }@else if$ type==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; @while$ i>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来命名