淘先锋技术网

首页 1 2 3 4 5 6 7

Sass 备忘单 - Sass教程 - 编程基础教程

这是一个快速参考备忘单，列出了SASS最有用的功能。

Sass 基础

介绍

  • 文档(sass-lang.com)
  • 在 Y 分钟内学习 X(learnxinyminute.com)

变量

$defaultLinkColor: #46EAC2;a {
  color: $defaultLinkColor;}

字符串插值

$wk: -webkit-;.rounded-box {#{$wk}border-radius: 4px;}

注释

/*
 Block comments
 Block comments
 Block comments
*/// Line comments

混合

@mixin heading-font {
    font-family: sans-serif;
    font-weight: bold;}h1 {
    @include heading-font;}

请参阅：Mixins

嵌套

.markdown-body {
    a {
      color: blue;&:hover {
        color: red;}}}

到属性

text: {// like text-align: centeralign: center;// like text-transform: uppercase
    transform: uppercase;}

延伸

.button {···}
.push-button {
    @extend .button;}

@import

@import './other_sass_file';
@import '/code', 'lists';// Plain CSS @imports
@import "theme.css";
@import url(theme);

的.sass或.sass扩展名是可选的。

Sass 混合

参数

@mixin font-size($n) {
    font-size: $n * 1.2em;}
body {
    @include font-size(2);}

默认值

@mixin pad($n: 10px) {
    padding: $n;}
body {
    @include pad(15px);}

默认变量

$default-padding: 10px;@mixin pad($n: $default-padding) {
    padding: $n;}body {
    @include pad(15px);}

Sass 颜色函数

rgba

rgb(100, 120, 140)rgba(100, 120, 140, .5)rgba($color, .5)

混合

mix($a, $b, 10%)   // 10% a, 90% b

修改 HSLA

darken($color, 5%)lighten($color, 5%)
saturate($color, 5%)desaturate($color, 5%)grayscale($color)
adjust-hue($color, 15deg)complement($color)    // like adjust-hue(_, 180deg)
invert($color)
fade-in($color, .5)   // aka opacify()
fade-out($color, .5)  // aka transparentize()
rgba($color, .5)      // sets alpha to .5

获取单个值

HSLA

hue($color)         // 0deg..360deg
saturation($color)  // 0%..100%
lightness($color)   // 0%..100%
alpha($color)       // 0..1 (aka opacity())

RGB

red($color)         // 0..255
green($color)blue($color)

请参阅：hue(), red()

调整

// Changes by fixed amounts
adjust-color($color, $blue: 5)adjust-color($color, $lightness: -30%) // darken(_, 30%)adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)
// Changes via percentage
scale-color($color, $lightness: 50%)
// Changes one property completely
change-color($color, $hue: 180deg)change-color($color, $blue: 250)

支持：$red,$green,$blue,$hue,$saturation,$lightness,$alpha

Sass 其他功能

字符串

unquote('hello')quote(hello)
to-upper-case(hello)to-lower-case(hello)
str-length(hello world)str-slice(hello, 2, 5)     // "ello" - it's 1-based, not 0-based
str-insert("abcd", "X", 1) // "Xabcd"

单位

unit(3em)        // 'em'
unitless(100px)  // false

数值

floor(3.5)ceil(3.5)round(3.5)abs(3.5)
min(1, 2, 3)max(1, 2, 3)
percentage(.5)   // 50%
random(3)        // 0..3

杂项

variable-exists(red)    // checks for $red
mixin-exists(red-text)  // checks for @mixin red-textfunction-exists(redify)
global-variable-exists(red)
selector-append('.menu', 'li', 'a')   // .menu li a
selector-nest('.menu', '&:hover li')  // .menu:hover liselector-extend(...)selector-parse(...)selector-replace(...)selector-unify(...)

Sass 特征检查

特征检查

feature-exists(global-variable-shadowing)

特征

  • 全局变量阴影
  • 扩展选择器伪类
  • 单位级别 3
  • 出错

Sass 循环

For 循环

@for $i from 1 through 4 {
    .item-#{$i} { left: 20px * $i; }} 

Each 循环（简单）

$menu-items: home about contact;@each $item in $menu-items {
    .photo-#{$item} {
      background: url('#{$item}.jpg');}} 

Each 循环（嵌套）

$backgrounds: (home, 'home.jpg'),(about, 'about.jpg');@each $id, $image in $backgrounds {
    .photo-#{$id} {
      background: url($image);}}

While 循环

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

Sass 其他功能

条件句

@if $position == 'left' {
     position: absolute;
     left: 0;}@else if $position == 'right' {
     position: absolute;
     right: 0;}@else {
     position: static;}

插值

.#{$klass} { ... }      // Class
call($function-name)    // Functions@media #{$tablet}
font: #{$size}/#{$line-height}url("#{$background}.jpg")

列表

$list: (a b c);nth($list, 1)  // starts with 1
length($list)@each $item in $list { ... }

映射

$map: (key1: value1, key2: value2, key3: value3);map-get($map, key1)