码迷,mamicode.com
首页 > 其他好文 > 详细

Sass入门——基本特性-基础

时间:2016-04-15 21:57:58      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:

本文来自慕课网大漠
声明变量
三个部分:1、声明变量的符号"$"2、变量名称3、赋予变量的值
技术分享
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
在后面加上 !default表示默认变量
覆盖默认值:在默认变量之前重新声明变量即可
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的CSS:

body{
    line-height:2;
}

调用变量:

"$变量名"放在你想调用的地方就行了。

局部变量和全部变量
没什么难理解的,看一下代码就行了
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}
全局变量的影子:简单说就是局部变量的名字和全局变量的名字一样。
什么时候声明变量?
    1、该值至少重复出现了两次;
    2、该值至少可能会被更新一次;
    3、该值所有的变现都与变量有关(非巧合)
嵌套
选择器嵌套
有这样一段结构
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中header中的a标签,CSS:

nav a {
  color:red;
}
header nav a {
  color:green;
}

Sass:

nav{
  a{
    color: red;
    header & {
      color: green;
    }
  }
}
属性嵌套
CSS有些属性只是后缀不一样,前缀一样,比如margin-top/margin-bottom
如果CSS是这样:
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

那么Sass可以这样写:

.box{
  border: {
    top: 1px solid red;
    bottom: 1px solid green;
  }
}
伪类嵌套
和属性嵌套差不多,加上一个&符号就可以了
.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}
避免选择器嵌套:俩原因,读不懂,不会写。

 

混合宏
需要重复大量的样式时,混合宏很有用
声明混合宏
不带参数混合宏
使用"@mixin"来声明
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

带参数混合宏

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
复杂的混合宏
可以在大括号里写上带有逻辑关系的语句
@mixin box-shadow($shadow...){
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shaow: 0 0 4px rgba(0,0,0,0.3);
    @include prefixer(box-shadow, $shadow);
  }
}
box-shadow带有多个参数,可以用"..."来代替。当$shadow的参数数值量大于或等于1时,表示有多个阴影值,反之调用默认的参数值0 0 4px rgba(0,0,0,0.3)。
调用混合宏
匹配一个关键词"@include"来调用
比如调用上面的混合宏border-radius:
button {
    @include border-radius;
}
混合宏的参数
传一个不带值的参数
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

调用时给混合宏传一个参数值:

.box{
  @include border-radius(3px);
}

传一个带值的参数

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

调用时可以直接调用混合宏"border-radius"

.btn{
  @include border-radius;
}

当然也可以在调用时再给混合宏的参数传值:

.box{
  @include border-radius(50%);
}

传多个参数

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

一个特别的参数"...",当混合宏传入的参数过多时,可以用这个参数来代替。

@mixin box-shadow($shadow...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

混合宏的不足

生成冗余的代码块

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  @include border-radius;
  margin-bottom: 5px;
}
.btn {
  @include border-radius;
}

生成的CSS

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

扩展/继承

加一个"@extend"就可以了

 

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

 

编译后的CSS

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
}
.btn-second {
  background-clor: orange;
  color: #fff;
}

占位符 %placeholder

%声明的代码如果不被@extend调用,不会产生任何的代码。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

编译后的CSS:

.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}
通过@extend调用的占位符,编译出的代码会将相同的代码合并在一起。
混合宏 || 继承 || 占位符?
技术分享
插值
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}

编译成CSS:

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

再来看一个例子(构建一个选择器)

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译成CSS:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

 

 
 
 
 
 
 
技术分享
 

Sass入门——基本特性-基础

标签:

原文地址:http://www.cnblogs.com/dearzui/p/5396983.html

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