Sass学习

作者: yywood | 来源:发表于2019-07-03 10:43 被阅读0次

Sass入门
Sass学习
学习SASS
sass学习
SASS学习
学习 Sass
Sass 学习
Sass学习
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
如何将Sass编译成CSS

入门

基本用法

变量声明与引用 $ !default


// 变量声明

$highlight-color: #F90;

// 变量引用

$highlight-border: 1px solid $highlight-color;

// default用法

$fancybox-width: 400px !default;

.fancybox {

width: $fancybox-width;

}

保持sass条理性和可读性：嵌套、导入、注释


// 嵌套

#content {

  article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

  }

  #content aside { background-color: #EEE }

}

article a {

  color: blue;

  &:hover { color: red }

}

// 导入

@import 'color'

.blue-theme {@import "blue-theme"}

// 注释

body {

  color: #333; // 这种注释内容不会出现在生成的css文件中

  padding: 0; /* 这种注释内容会出现在生成的css文件中 */

}

mixin，混合器

基本用法 @mixin @include， sass代码片段的替换


@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

类似变量定义和函数定义，可以直接定义，可以传参，可以对参数赋默认值


// 变量形式

@mixin no-bullets {

  list-style: none;

  li {

    list-style-image: none;

    list-style-type: none;

    margin-left: 0px;

  }

}

ul.plain {

  color: #444;

  @include no-bullets;

}

// 函数形式

@mixin link-colors($normal, $hover, $visited) {

  color: $normal;

  &:hover { color: $hover; }

  &:visited { color: $visited; }

}

a {

  @include link-colors(blue, red, green);

}

extend，继承

基本用法 @extend ，选择器替换


.error {

  border: 1px solid red;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

对比混合，继承生成的css代码更少（只替换了选择器，没有生成新代码），存在样式层叠问题


// mixin

@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

// 最终生成

.notice {

  background-color: green;

  border: 2px solid #00aa00;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}


// extend

.rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

.notice {

  background-color: green;

  border: 2px solid #00aa00;

  @extend .rounded-corners;

}

// 最终生成

.rounded-corners .notice {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

.notice {

  background-color: green;

  border: 2px solid #00aa00;

}

文档学习

语法特点

scss：css语法基础进行扩展
sass：缩进代替大括号，换行代替分号

css扩展

样式嵌套


#main p {

  color: #00ff00;

  width: 97%;

  .redbox {

    background-color: #ff0000;

    color: #000000;

  }

}

父选择器


a {

  font-weight: bold;

  text-decoration: none;

  &:hover { text-decoration: underline; }

  body.firefox & { font-weight: normal; }

}

属性嵌套


.funky {

  font: {

    family: fantasy;

    size: 30em;

    weight: bold;

  }

}

注释

支持/**/注释和//注释


/* This comment is

* several lines long.

* since it uses the CSS comment syntax,

* it will appear in the CSS output. */

body { color: black; }

// These comments are only one line long each.

// They won't appear in the CSS output,

// since they use the single-line comment syntax.

a { color: green; }

sassscript

变量定义$


// 全局变量

$width: 5em;

#main {

  width: $width;

}

// 局部变量

#main {

  $width: 5em;

  width: $width;

}

// 提升为全局变量

#main {

  $width: 5em !global;

  width: $width;

}

// 默认值声明!default

$content: "First content";

$content: "Second content?" !default;

$new_content: "First time reference" !default;

#main {

  content: $content;

  new-content: $new_content;

}

// =>

#main {

  content: "First content";

  new-content: "First time reference";

}

数据类型

数字
字符串
颜色
布尔
空 null
数组


// 空数组

$list: ();

// 正常数组，逗号分隔，不换行

$list-space: "item-1" "item-2" "item-3";

$list:"antzone",2,"softwhy.com";

.div {

  content: nth($list,1);

}

特别说明:列表第一项的索引是1，而不是0

操作列表的函数:

length($list)：返回一个列表的长度值

nth( $list,$ n)：返回一个列表中指定的某个标签值

join( $list1,$ list2, [$separator])：将两个列给连接在一起，变成一个列表

.append( $list1,$ val, [$separator])：将某个值放在列表的最后

.zip($lists…)：将几个列表结合成一个多维的列表


$map: (

  key1: value1,

  key2: value2,

  key3: value3

);

/* 遍历map */

@each $key, $value in $map {

  .element--#{$key} {

    background: $value;

  }

}

1.map-get( $map,$ key)：根据给定的 key 值，返回 map 中相关的值
2.map-merge( $map1,$ map2)：将两个 map 合并成一个新的 map
3.map-remove( $map,$ key)：从 map 中删除一个 key，返回一个新 map
4.map-keys( $map)：返回 map 中所有的 key 5.map-values($ map)：返回 map 中所有的 value
6.map-has-key( $map,$ key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false
7.keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value

运算符

简单运算（+-*/%）
颜色运算：对应的颜色通道进行运算，alpha值相同可以运算，运算结果不影响alpha通道
布尔运算：and or not
括号可以改变运算顺序

函数

内置函数
自定义函数


$oneWidth: 10px;

$twoWidth: 40px;

@function widthFn($n) {

  @return $n * $twoWidth + ($n - 1) * $oneWidth;

}

.leng {

width: widthFn(5);

}

插值 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量


$name: foo;

$attr: border;

p.#{$name} {

  #{$attr}-color: blue;

}

// 编译后

p.foo {

  border-color: blue;

}

父选择器


a {

  font-weight: bold;

  text-decoration: none;

  &:hover { text-decoration: underline; }

  body.firefox & { font-weight: normal; }

}

// 编译为

a {

  font-weight: bold;

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

body.firefox a {

  font-weight: normal;

}

指令

@import

用法

寻找sass文件并将其导入


@import "foo.scss";

@import "rounded-corners", "text-shadow";

$family: unquote("Droid+Sans");

@import url("http://fonts.googleapis.com/css?family=\#{$family}");

分音

使用@import "colors"可以导入_colors.scss,但不会编译为css，同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

嵌套


.example {

  color: red;

}

#main {

  @import "example";

}

=>

#main .example {

  color: red;

}

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

@media

和css中的@media含义一致，但允许使用嵌套和变量函数运算等


$media: screen;

$feature: -webkit-min-device-pixel-ratio;

$value: 1.5;

@media #{$media} and ($feature: $value) {

  .sidebar {

    width: 500px;

  }

}

@extend

工作原理

选择器替换


.error {

  border: 1px #f00;

  background-color: #fdd;

}

.error.intrusion {

  background-image: url("/image/hacked.png");

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

=>

.error, .seriousError {

  border: 1px #f00;

  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {

  background-image: url("/image/hacked.png"); }

.seriousError {

  border-width: 3px; }

多继承

允许多继承


.error {

  border: 1px #f00;

  background-color: #fdd;

}

.attention {

  font-size: 3em;

  background-color: #ff0;

}

.seriousError {

  @extend .error;

  @extend .attention;

  border-width: 3px;

}

=>

.error, .seriousError {

  border: 1px #f00;

  background-color: #fdd; }

.attention, .seriousError {

  font-size: 3em;

  background-color: #ff0; }

.seriousError {

  border-width: 3px; }

继承链


.error {

  border: 1px #f00;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

.criticalError {

  @extend .seriousError;

  position: fixed;

  top: 10%;

  bottom: 10%;

  left: 10%;

  right: 10%;

}

=>

.error, .seriousError, .criticalError {

  border: 1px #f00;

  background-color: #fdd;

}

.seriousError, .criticalError {

  border-width: 3px;

}

.criticalError {

  position: fixed;

  top: 10%;

  bottom: 10%;

  left: 10%;

  right: 10%;

}

选择器序列与合并

选择器序列不可以被继承，但是可以继承其它内容


#fake-links .link {

    @extend a;

}

a {

    color: blue;

    &:hover {

        text-decoration: underline;

    }

}

=>

a, #fake-links .link {

    color: blue;

}

a:hover, #fake-links .link:hover {

    text-decoration: underline;

}

如果选择器序列继承了某个选择器，这个选择器出现在另一选择器序列中，会导致选择器序列合并。合并方式为:将相同部分合并在一起，其它部分交替输出


// 无相同内容

#admin .tabbar a {

    font-weight: bold;

}

#demo .overview .fakelink {

    @extend a;

}

=>

#admin .tabbar a,

#admin .tabbar #demo .overview .fakelink,

#demo .overview #admin .tabbar .fakelink {

font-weight: bold;

}

// 包含相同内容

#admin .tabbar a {

    font-weight: bold;

}

#admin .overview .fakelink {

    @extend a;

}

=>

#admin .tabbar a,

#admin .tabbar .overview .fakelink,

#admin .overview .tabbar .fakelink {

font-weight: bold;

}

@extend-Only

%extreme作用是一个占位符，#context a%extreme本身不会被编译到css中，只有在使用后，才会编译，减少冲突


// This ruleset won't be rendered on its own.

#context a%extreme {

  color: blue;

  font-weight: bold;

  font-size: 2em;

}

.notice {

  @extend %extreme;

}

=>

#context a.notice {

  color: blue;

  font-weight: bold;

  font-size: 2em; }

!optional

如果.notice不存在，a.important { @extend .notice }将会报错，但加上!optional可以取消这个错误。


a.important {

    @extend .notice !optional;

}

指令内继承

只能在指令内部的作用域内继承，不可以跨指令层次继承


// 正确的例子

@media print {

  .error {

    border: 1px #f00;

    background-color: #fdd;

  }

  .seriousError {

    @extend .error;

    border-width: 3px;

  }

}

// 错误的例子

.error {

  border: 1px #f00;

  background-color: #fdd;

}

@media print {

  .seriousError {

    // INVALID EXTEND: .error is used outside of the "@media print" directive

    @extend .error;

    border-width: 3px;

  }

}

@at-root

用法

将css规则跳出嵌套，放到根节点上


div {

  @at-root a {

    color: red;

  }

}

=>

a {

  color: red;

}

@at-root 只会跳出选择器嵌套，而不能跳出 @media 或 @support

without with

使用without with可以跳出其它规则, 可以接受四个参数：all（表示所有），rule（表示常规css），media（表示media），support（表示support）。@at-root默认值为@at-root (widthout:rule)。


@media print {

  .page {

    width: 800px;

    a {

      color: red;



      @at-root(without: media rule)

      {

        span { color: #00f }

      }

}

  }

}

=>

@media print {

  .page {

    width: 800px;

  }

  .page a {

    color: red;

  }

}

span {

  color: #00f;

}

@debug

编译时输出指令


@debug 10em + 12em;

输出


Line 1 DEBUG: 22em

@warn

同@debug，但会输出堆栈信息

@error

同@warn，但会中断编译器编译

@if

条件语句，当@if表达式的返回值不是false或null时，条件成立，返回{}中的值


p {

  @if 1 + 1 == 2 { border: 1px solid; }

  @if 5 < 3 { border: 2px dotted; }

  @if null  { border: 3px double; }

}

=>

p {

  border: 1px solid;

}

// if else

$type: monster;

p {

  @if $type == ocean {

    color: blue;

  } @else if $type == matador {

    color: red;

  } @else if $type == monster {

    color: green;

  } @else {

    color: black;

  }

}

@for

循环语句，包含两种格式@for $var from <start> through <end>,@for $var from <start> to <end>

$var可以是任何变量
<start> 和 <end> 必须是整数值
使用through时同时包含<start>和<end>,使用to时只包含<start>不包含<end>


@for $i from 1 through 3 {

  .item-#{$i} { width: 2em * $i; }

}

=>

.item-1 { width: 2em; }

.item-2 { width: 4em; }

.item-3 { width: 6em; }

@each

遍历语句

一般遍历


@each $animal in puma, sea-slug, egret, salamander {

  .#{$animal}-icon {

    background-image: url('/images/#{$animal}.png');

  }

}

=>

.puma-icon {

  background-image: url('/images/puma.png'); }

.sea-slug-icon {

  background-image: url('/images/sea-slug.png'); }

.egret-icon {

  background-image: url('/images/egret.png'); }

.salamander-icon {

  background-image: url('/images/salamander.png'); }

多重赋值


@each $animal, $color, $cursor in (puma, black, default),

                                  (sea-slug, blue, pointer),

                                  (egret, white, move) {

  .#{$animal}-icon {

    background-image: url('/images/#{$animal}.png');

    border: 2px solid $color;

    cursor: $cursor;

  }

}

=>

.puma-icon {

  background-image: url('/images/puma.png');

  border: 2px solid black;

  cursor: default; }

.sea-slug-icon {

  background-image: url('/images/sea-slug.png');

  border: 2px solid blue;

  cursor: pointer; }

.egret-icon {

  background-image: url('/images/egret.png');

  border: 2px solid white;

  cursor: move; }

键值对赋值


@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {

  #{$header} {

    font-size: $size;

  }

}

=>

h1 {

  font-size: 2em; }

h2 {

  font-size: 1.5em; }

h3 {

  font-size: 1.2em; }

@while


$i: 6;

@while $i > 0 {

  .item-#{$i} { width: 2em * $i; }

  $i: $i - 2;

}

=>

.item-6 {

  width: 12em; }

.item-4 {

  width: 8em; }

.item-2 {

  width: 4em; }

@mixin

定义代码片段，可以重复使用

定义

使用@mixin定义


@mixin large-text {

  font: {

    family: Arial;

    size: 20px;

    weight: bold;

  }

  color: #ff0000;

}

引用

使用@include引用


@include large-text;

嵌套

可以在mixin内部嵌套父选择器，也可以包含其他mixin样式


// 选择器嵌套

@mixin clearfix {

  display: inline-block;

  &:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  * html & { height: 1px }

}

// mixin嵌套

@mixin compound {

  @include highlighted-background;

  @include header-text;

}

@mixin highlighted-background { background-color: #fc0; }

@mixin header-text { font-size: 20px; }

参数

可以在mixin样式中设置变量，在使用时赋值


// 基本用法

@mixin sexy-border($color, $width) {

  border: {

    color: $color;

    width: $width;

    style: dashed;

  }

}

p { @include sexy-border(blue, 1in); }

// 参数设置默认值

@mixin sexy-border($color, $width: 1in) {

  border: {

    color: $color;

    width: $width;

    style: dashed;

  }

}

p { @include sexy-border(blue); }

h1 { @include sexy-border(blue, 2in); }

// 使用关键字参数

p { @include sexy-border($color: blue); }

h1 { @include sexy-border($color: blue, $width: 2in); }

// 参数变量

@mixin box-shadow($shadows...) {

  -moz-box-shadow: $shadows;

  -webkit-box-shadow: $shadows;

  box-shadow: $shadows;

}

.shadows {

  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);

}

// 参数变量的逐条使用

@mixin colors($text, $background, $border) {

  color: $text;

  background-color: $background;

  border-color: $border;

}

$values: #ff0000, #00ff00, #0000ff;

.primary {

  @include colors($values...);

}

@content

引用mixin时，可以传入代码片段，替换掉mixin中@content的部分


@mixin apply-to-ie6-only {

  * html {

    @content;

  }

}

@include apply-to-ie6-only {

  #logo {

    background-image: url(/logo.gif);

  }

}

=>

* html #logo {

background-image: url(/logo.gif);

}

变量作用域


$color: white;

// 这里的$color只是形参，不会被变量替换

@mixin colors($color: blue) {

  background-color: $color;

  @content;

  border-color: $color;

}

.colors {

  @include colors { color: $color; }

}

=>

.colors {

  background-color: blue;

  color: white;

  border-color: blue;

}

@function

自定义函数，使用@function定义和@return返回,参数传递方式与mixin参数相同


$grid-width: 40px;

$gutter-width: 10px;

@function grid-width($n) {

  @return $n * $grid-width + ($n - 1) * $gutter-width;

}

#sidebar { width: grid-width(5); }

=>

#sidebar {

  width: 240px; }

Sass入门
学习Sass（官网：Sass）之前需要了解什么是Sass,Sass全称：Syntactically Awesome...
Sass学习
Sass学习介绍 Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 ...
学习SASS
css扩展语言面向对象变量嵌套混合导入安装Sass和Compass sass基于Ruby语言开发而成，...
sass学习
sass重要特征引入变量$highlight-color: #F90;
SASS学习
今天上午将前端经典的一个框架学习了一下，通过官网以及一些教学视频初步走通了这个神奇的css框架。 window...
学习 Sass
Sass的使用安装Ruby 安装Sass ( vscsde可以使用Live Sass Compiler 插件 ...
Sass 学习
一、Sass安装（windows版） 1.在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，可...
Sass学习
入门基本用法变量声明与引用 $ !default 保持sass条理性和可读性：嵌套、导入、注释 mixin，混...
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中，开篇不讲怎么安装，sass是什么，这些搜索引擎会告诉你，我们从sass的作用开始讲起，...
如何将Sass编译成CSS
本节我们来学习 Sass 的编译，我们写好的 Sass 代码，浏览器是不能识别的，Sass 只不过是作为一个预处理...