sass学习笔记1

less在处理CSS动画时，非常恶心，决定转向sass了。sass诞生得比less早，只是因为它是ruby写的，因此受众面够少。但我们不需要自己下编译器或使用命令行，我们可以koala这神器

首先几个注意点，sass可以用sass后缀名，也可以用scss后缀名。前者比较恶心，像python一样没有花括号，也不让写分号，散架子一样。因此推荐用scss，这个也是目前我遇到的大部分人的选择。

关于中文编译出错的问题，需要指定字符集。

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$fontSize: 12px;

body{

    font-size:$fontSize;

}

/* 测试注释 */

　$side : left;

　　.rounded {

　　　　border-#{$side}-radius: 5px;

　　}

注释的问题，sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

导入的问题，它还是用@import关键字，但做了一些处理，如果后缀名是css，那么它不会对此导入文件进行编译，如果是sass,scss或没有写，那么就会编译。

@import "reset.css";

@import "a";

p{

  background: #0982c1;

}

好了，我们正式开始学习它的语法。sass既然是一门正统的编程语言，就有对应的变量，数据结构，函数等东西。

sass使用PHP风格的$开头的变量命名风格，使用ruby风格#{ }占位符

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$borderDirection:       top !default;

$fontSize:              12px !default;

$baseLineHeight:        1.5 !default;

//应用于class和属性

.border-#{$borderDirection}{

  border-#{$borderDirection}:1px solid #ccc;

}

//应用于复杂的属性值

body{

    font:#{$fontSize}/#{$baseLineHeight};

}

$base: ".module";

#{$base} {

    &#{$base}-something {

        background: red;

    }

}

//-------------------------------

.border-top {

  border-top: 1px solid #ccc; }

body {

  font: 12px/1.5; }

.module.module-something {

  background: red; }

变量与占位符，可以让我们构建复杂可重用的属性值。

默认值，写法有点类似!important，但优先级最低。

$baseLineHeight:        2;

$baseLineHeight:        1.5 !default;

body{

    line-height: $baseLineHeight;

}

//-------------------------------

body{

    line-height:2;

}

编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

数据结构方面，它拥有类似数组的list类型，类似对象的map类型

sass的数组，是通过空格来划分元素，如果是二维组数，则需要用到小括号与逗号。

//一维数组

$array: 5px 10px 20px 30px;

//二维数组

$array2: 5px 10px, 20px 30px;

$array3: (5px 10px) (20px 30px);

sass的数组有一个特点，没有用[]包起来，也不能用[]来取其中的某一个元素，要用需要用到nth内置方法，并且nth与CSS3的nth-child一样，是从1开始。

$linkColor: #08c #333 #ccc;

a{

  color:nth($linkColor,1);

  &:hover{

    color:nth($linkColor,2);

  }

}

//css style

//-------------------------------

a{

  color:#08c;

}

a:hover{

  color:#333;

}

相关操作数组的方法

创建一个空数组

$list:();

join($list1, $list2, $separator:auto)

//合并两个数组

join(10px 20px, 30px 40px) => 10px 20px 30px 40px

join((blue, red), (#abc, #def)) => blue, red, #abc, #def

join(10px, 20px) => 10px 20px

join(10px, 20px, comma) => 10px, 20px

join((blue, red), (#abc, #def), space) => blue red #abc #def

index($list, $value)

//取得目标在数组的位置，以1开始

index(1px solid red, solid) => 2

index(1px solid red, dashed) => null

index((width: 10px, height: 20px), (height 20px)) => 2

length($list)

//取得数组的长度

length(10px) => 1

length(10px 20px 30px) => 3

length((width: 10px, height: 20px)) => 2

list_separator($list)

//取得数组的分隔符

list-separator(1px 2px 3px) => space

list-separator(1px, 2px, 3px) => comma

list-separator(‘foo‘) => space

nth($list, $n)

//取得数组在某一位置上的元素

nth(10px 20px 30px, 1) => 10px

nth((Helvetica, Arial, sans-serif), 3) => sans-serif

nth((width: 10px, length: 20px), 2) => length, 20px

zip(*$lists)

//将多个$list组合在一起成为一个多维列表。如果列表源长度并不是所有都相同，结果列表长度将以最短的一个为准

append($list, $val, $separator:auto)

append(10px 20px, 30px) => 10px 20px 30px

append((blue, red), green) => blue, red, green

append(10px 20px, 30px 40px) => 10px 20px (30px 40px)

append(10px, 20px, comma) => 10px, 20px

append((blue, red), green, space) => blue red green

sass的对象与JS的对象很相似，唯一不同的是，它是用小括号括起来，因为花括号用作各种嵌套边界。同时，为了操作sass对象，它提供了比JS丰富多的函数，它们基本是以map-开头（全部小写并且用“-”连起来是纯正的ruby风格）。

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

下面是方法演示

map-get

//取得对象的某一属性的值 

map-get(("foo": 1, "bar": 2), "foo") => 1

map-get(("foo": 1, "bar": 2), "bar") => 2

map-get(("foo": 1, "bar": 2), "baz") => null

map-remove($map, $key)

//删掉某一键值对

map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)

map-remove(("foo": 1, "bar": 2), "baz") => ("foo": 1, "bar": 2)

map-keys($map)

//取得它的所有属性名，以数组形式返回

map-keys(("foo": 1, "bar": 2)) => "foo", "bar"

map-values($map)

//取得它的所有属性值，以数组形式返回

map-values(("foo": 1, "bar": 2)) => 1, 2

map-values(("foo": 1, "bar": 2, "baz": 1)) => 1, 2, 1

map-has-key($map, $key)

//判定它是否拥有某一个属性

map-has-key(("foo": 1, "bar": 2), "foo") => true

map-has-key(("foo": 1, "bar": 2), "baz") => false

map-merge($map1, $map2)

//合并两个对象

map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)

map-merge(("foo": 1, "bar": 2), ("bar": 3)) => ("foo": 1, "bar": 3)

流程控制: @if，@else, @for，@each和@while

@if非常简单，我们直接看例子

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$boolean: true !default;

@mixin simple-mixin {

    @if $boolean {

        display: block;

    } @else {

        display: none;

    }

}

.some-selector {

    @include simple-mixin;

}

//------------------------------

.some-selector {

  display: block; }

说到这个，sass有一个if内置方法，用于模拟三目运算符。

@if $width != auto {

  $width: if(unitless($width), $width + px, $width);

}

@for有两种形式， @for xxx form yyy through zzz或@for xxx form yyy to zzz，需要用户指定开始值与结束值，它们都应该是数字。

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$name: for !default;

//相当于JS的 for(var $i = 1; $i <= 4; $i++){}

@for $i from 1 through 4 {

    .#{$name}-#{$i}{

        width: 60px + $i;

    }

}

//------------------------------

.for-1 {

  width: 61px; }

.for-2 {

  width: 62px; }

.for-3 {

  width: 63px; }

.for-4 {

  width: 64px; }

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$name: for !default;

//相当于JS的 for(var $i = 1; $i < 4; $i++){}

@for $i from 1 to 4 {

    .#{$name}-#{$i}{

        width: 60px + $i;

    }

}

//------------------------------

.for-1 {

  width: 61px; }

.for-2 {

  width: 62px; }

.for-3 {

  width: 63px; }

@for循环指令除了可以从小数值到大数值循环之外，还可以从大数值循环到小数值。而且两种形式都支持。

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$name: for !default;

//由于开始值大于结束值,因此是递减,相当于for(var $e = 5; $e >= 1; $e--){}

@for $e from 5 through 1 {

    .#{$name}-#{$e}{

        width: 60px + $e;

    }

}

//------------------------------

.for-5 {

  width: 65px; }

.for-4 {

  width: 64px; }

.for-3 {

  width: 63px; }

.for-2 {

  width: 62px; }

.for-1 {

  width: 61px; }

@each 是用于遍历数组与对象的。

如果是遍历数组， @each跟着的是元素的变量名，随便起，接着是in，最后是数组名。

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$list: adam john wynn mason kuroir;

@mixin author-images {

    @each $author in $list {

        .photo-#{$author} {

            background: url("/images/avatars/#{$author}.png") no-repeat;

        }

    }

}

.author-bio {

    @include author-images;

}

//------------------------------

.author-bio .photo-adam {

  background: url("/images/avatars/adam.png") no-repeat; }

.author-bio .photo-john {

  background: url("/images/avatars/john.png") no-repeat; }

.author-bio .photo-wynn {

  background: url("/images/avatars/wynn.png") no-repeat; }

.author-bio .photo-mason {

  background: url("/images/avatars/mason.png") no-repeat; }

.author-bio .photo-kuroir {

  background: url("/images/avatars/kuroir.png") no-repeat; }

//================================

@charset "utf-8";//必须设置了这个才能编译有中文的注释

//循环二维数组

$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);

@each $animal, $color, $cursor in $animal-data {

  .#{$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; }

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$icon-glass: "\f000";//批量生成ICON字体

$icon-music: "\f001";

$icon-search: "\f002";

$icon-envelope-o: "\f003";

$icon-heart: "\f004";

$icon-star: "\f005";

$icon_names: icon-glass icon-music icon-search icon-envelope-o icon-heart icon-star;

$icon_vars: $icon-glass $icon-music $icon-search $icon-envelope-o $icon-heart $icon-star;

@each $name in $icon_names {

    $i: index($icon_names, $name);

    .#{$name} {

        content: nth($icon_vars, $i);

    }

}

//------------------------------

.icon-glass {

  content: "\f000"; }

.icon-music {

  content: "\f001"; }

.icon-search {

  content: "\f002"; }

.icon-envelope-o {

  content: "\f003"; }

.icon-heart {

  content: "\f004"; }

.icon-star {

  content: "\f005"; }

上面的优化版

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$icons:

    glass "\f000",

    music "\f001",

    search "\f002",

    envelope-o "\f003",

    heart "\f004",

    star "\f005"

    ;//定义一个2维数组

@function get-icon($icon-name){//要什么生产什么,不需要一下子全部生成出来

    @each $icon in $icons {

        @if nth($icon, 1) == $icon-name {

            @return nth($icon,2);

        }

    }

}

.icon-glass {

    content: get-icon(glass);

}

//------------------------------

.icon-glass {

  content: "\f000"; }

@charset "utf-8";//必须设置了这个才能编译有中文的注释

$icons: (

    glass :"\f000",

    music: "\f001",

    search: "\f002",

    envelope-o: "\f003",

    heart: "\f004",

    star: "\f005"

);

@function get-icon($icon-name){//要什么生产什么,不需要一下子全部生成出来

   @return map-get($icons, $icon-name);

}

.icon-glass {

    content: get-icon(glass);

}

//------------------------------

.icon-glass {

  content: "\f000"; }

如果是遍历对象，后面跟着两个变量，分别是键名与键值，逗号隔开，接着是in，最后是对象名。

@charset "utf-8";//必须设置了这个才能编译有中文的注释

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

  #{$key} {

    font-size: $val;

  }

}

//------------------------------

h1 {

  font-size: 2em; }

h2 {

  font-size: 1.5em; }

h3 {

  font-size: 1.2em; }

@while与JS的while非常相似

来自http://www.cnblogs.com/rubylouvre/p/3794292.html

时间： 2024-08-27 16:19:18

sass学习笔记1的相关文章

Sass学习笔记（补充）

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

sass学习笔记2

今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过程,此元素的父元素与其他选择器都有许多相同的部分,嵌套就是把这些相同的部分放到某一层花括号里,然后通过花括号的层层缩进堆砌,找到它们的共性与特性. @charset "utf-8";//必须设置了这个才能编译有中文的注释 nav { ul { margin: 0; padding: 0; list-styl

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass学习笔记-安装

Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby

sass学习笔记-输出方法

1.嵌套输出方式 nestedSass 提供了一种嵌套显示 CSS 文件的方式.例如 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.

Sass学习笔记 -- 变量及变量作用域历史遗留问题

sass有两种后缀名文件: 一种后缀名为sass,写选择器时不能使用大括号和分号 一种后缀名为scss,使用大括号和分号 //后缀名为sass的语法,不能出现大括号和分号 $highlight-color: #abcdef .selected   border: 1px $highlight-color solid    //后缀名为scss的语法,跟css一样,需要大括号和分号 $highlight-color: #abcdef; .selected{   border:1px solid $

Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比. //scss $baseFontSize:      10px !default; $gray:    

菜鸟的 Sass 学习笔记

介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass 是世界上最成熟稳定强大的css扩展语言. sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器.用sass来写css,然后再编译成正常的css文件. css兼容:Sass与所有版本的CS