今天跟大家共同分享交流一下关于sass的知识点:

sass的产生:

css不是一种编程语言,我们可以用它开发网页样式,但不能用它进行编程。它没有常量,变量,也没有条件语句,只是对属性一行行的描述,资料上对它描述几乎都是:它是设计师的工具,而不是程序员的工具。实际上,它在程序员的眼里并不是那么完美的,它的写法需要人工一点点去进行排版,这不仅增加了程序员在编写过程中的困难,也使得后期的维护工作变得繁杂。在这种情况下,css预处理器(css preprocessor)应运而生。css预处理器主要包括以下几种:

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

在众多的css预处理器语言中,用的最多的就是sass,less和stylus. 而今天主要说的是sass(scss)的用法。

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、mixins、导入等众多功能, 并且完全兼容 CSS 语法。

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。

既然是为了解决css在开发样式中存在的弊端,sass(scss)的优点,其实已经很明显,它提供了许多便利的写法,不仅仅大大节省了开发时间,也使得css的开发变得简单易维护。

step1:

Sass 有三种使用方式: 命令行工具、独立的 Ruby 模块,以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。 所有这些方式的第一步都是安装 Sass gem:

gem install sass

如果你使用的是 Windows, 就需要先安装 Ruby

如果要在命令行中运行 Sass ,只要输入

sass input.scss output.css

你还可以命令 Sass 监视文件的改动并更新 CSS :

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录:

sass --watch app/sass:public/stylesheets

使用 sass --help 可以列出完整的帮助文档。

在 Ruby 代码中使用 Sass 是非常容易的。 安装 Sass gem 之后,你可以执行 require "sass" , 然后就可以像这样使用 {Sass::Engine} :

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

下载安装ruby(网址:http://rj.baidu.com/soft/detail/22711.html?ald)参考安装教程(http://jingyan.baidu.com/article/48b558e33558ac7f38c09aee.html);

step2:跟css差不多类似的是文件建立方式,我们需要一个sass文件夹,里面放的是我们的sass文件,后缀名为.scss。例如:index.scss,这里面写我们要编写的样式,在这里面写的样式可以自动生成规范的css样式,并保存到index.css的文件里。

step3:你也可以通过以下命令让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

    sass --watch sass/index.scss:style/index.css

    也可以通过Ctrl+c来取消监听。

sass的基本用法

1、(1)不同于less的@,sass用$来定义变量,定义变量要注意不要使命名含糊不清,要有语义化。

例如:

$w:100px;

$h:100px;
           #div{  
              width:$w;
              height:$h;
              background:red;
           }

(2)如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

$w:100px;

$h:100px;

$side: left;

#div{  
              width:$w;
              height:$h;
              background:red;

     border-#{$side}-radius:50%;
               }

2、计算功能

SASS允许在代码中使用算式:

  body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

(本例来自http://www.ruanyifeng.com/blog/2012/06/sass.html)

3、嵌套

  sass允许选择器嵌套,例如:

将会被编译为

这将会避免重复写父级的选择器,是复杂的css嵌套布局变得简单。

4、引用父选择符&

&在编译时将被替换为父选择符,输出到 CSS 中。有时候,使用嵌套规则通过&引用父选择符是编写某种样式要比一般默认的嵌套更为方便。比如,当某个选择器有hover值得时候或者body元素有特殊的class的时候。在这种情况下,你可以清楚地指明通过&使父选择器插入到什么位置。例如:

会被编译为

(断网了。。。以下内容还是将代码以书写形式呈现吧,不能插入图片了。。。sorry。。。)

5、嵌套属性

(1)css中有诸如font-family,font-size,font-weight的属性,在css中,如果你想对他们都进行设置的话,你需要挨个将它们列出。而sass提供了一共简写的形式,仅写一次font,其他附属属性可以嵌套在里面,例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

将会被编译为:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

(2)font本身其实也是可以有value的,例如:

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

会被编译为:

.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

6、注释符:

sass跟css一样,支持多行注释/**/和单行注释//;

7、代码的重用:

(1)继承:SASS允许一个选择器,继承另一个选择器。

例如:

$w:100px;
$h:100px;
#demo1{
width:$w;
height:$h;
background:red;
} 现在demo2要继承demo1的样式,可以写为:
#demo2{
  @extend #div;
} 7、Mixin
(1)Mixin的用法是:使用@mixin命令,
例如:
@mixin Reset{
margin:0;
padding:0;
position:absolute;
left:0;
top:0;
width:$w;
height:$h;
} 使用@include命令,调用这个mixin #demo1{
@include Reset;
background:green;
}
(2)Mixin的强大之处在于,在于可以指定参数和缺省值。(本例来自http://www.ruanyifeng.com/blog/2012/06/sass.html)
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  } 使用的时候,根据需要加入参数: div {
    @include left(20px);
  }

下面是一个mixin的实例,用来生成浏览器前缀。

  @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

使用的时候,可以像下面这样调用:

  #navbar li { @include rounded(top, left); }

  #footer { @include rounded(top, left, 5px); }

最后,给大家补充点关于sass,less,stylus的小知识:
(以下内容转自https://zhidao.baidu.com/question/2076835432627765028.html) SASS2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。 LESS2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。 Stylus,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。总结:Sass看起来在提供的特性上占有优势,但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS,而不需要像Sass那样需要将CSS文件转换成Sass格式。
Stylus功能上更为强壮,和js联系更加紧密。
今天就先写到这儿吧,欢迎大家补充。
												

学习笔记总结---关于sass的更多相关文章

  1. Sass和Compass学习笔记系列之Sass

    最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...

  2. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  3. Sass学习笔记(补充)

    阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...

  4. sass个人学习笔记

    Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...

  5. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  6. 学习笔记 - Sass的安装与使用手册

    最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...

  7. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  8. JavaScript学习笔记:数组reduce()和reduceRight()方法

    很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...

  9. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

随机推荐

  1. 【linux】学习3

    鸟哥 书的第7章 从 /home/dtest1   跳入 /home/dtest2 目录: cd  ../dtest2   注意 cd后有空格 ..后无空格 特殊目录: .    代表此层目录 .. ...

  2. 20145213《Java程序设计》第十周学习总结

    20145213<Java程序设计>第十周学习总结 教材学习总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接 ...

  3. 9.22 window对象、document对象

    一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...

  4. TFS强制解除签入签出锁定

    首先你要知道你服务器的用户名和登录密码 看被别人签出了的文件

  5. JqueryAjaxFormData文件异步上传

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. 解决jetty7.0.pre5启动时报ClassNotFoundException: javax.interceptor.InvocationContext异常的问题

    一.背景介绍:最近项目在使用maven命令行运行jetty服务器时出现ClassNotFoundException: javax.interceptor.InvocationContext异常 二.环 ...

  7. July 8th, Week 28th Friday, 2016

    Care and diligence bring luck. 谨慎和勤奋带来好运气. Just as we have said before, diligence is the mother of g ...

  8. sys.sysprocesses视图的使用小结

    Sys.SysProcesses 系统表是一个很重要的系统视图,主要用来定位与解决Sql Server的阻塞和死锁包含正在 SQL Server 实例上运行的进程的相关信息.这些进程可以是客户端进程或 ...

  9. .net学习笔记----有序集合SortedList、SortedList<TKey,TValue>、SortedDictionary<TKey,TValue>

    无论是常用的List<T>.Hashtable还是ListDictionary<TKey,TValue>,在保存值的时候都是无序的,而今天要介绍的集合类SortedList和S ...

  10. ASP.NET MVC中ViewData、ViewBag和TempData

    1.ViewData 1.1 ViewData继承了IDictionary<string, object>,因此在设置ViewData属性时,传入key必须要字符串型别,value可以是任 ...