Sass-学习笔记

Posted xing.org1^

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass-学习笔记相关的知识,希望对你有一定的参考价值。

1:定义

Sass是css预处理器的一种,也是最早的css预处理语言。Sass采用Ruby语言编写,为css增加一些编程的特性,无需考虑浏览器的兼容性问题。

编程特性指:可以在css中使用变量、简单地逻辑程序、函数等等在编程语言中的一些基本特性

但是,sass无法兼容已有的css代码。即sass可以推导成css,css没变法反变回去之前的sass。

2:其他一些css预处理器

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

 3:关于SassSCSS之间的不同

Sass和SCSS其实是同一种东西,平时都称之为Sass。二者其实有不同

两个区别点如下

(1).文件扩展不同。

  Sass用“.sass”后缀为扩展名;

  SCSS用“.scss”;

(2).语法书写方式不同。

  Sass以严格的缩进式语法规则来书写,不带大括号“{}”和分号“;”。

  SCSS的语法书写和CSS语法书写方式非常类似。

示例如下:

Sass语法——

$font-stack: Helvetica,sans-serif      //定义变量

$primary-color: #333    //定义变量

 

body

  font: 100% $font-stack

  color: $primary-color

 

SCSS语法——

$font-stack : Helvetica, sans-serif;

$primary-color: #333;

 

body{

  font: 100% $font-stack;

  color: $primary-color;

}

 

二者编译出来的css都是

body{

  font: 100% Helvetica, sans-serif;

  color: #333;  

}

接下来学习的都是使用的SCSS语法方式

 4:Sass和CSS的写法差别:

正如Sass和SCSS的区别一样,

css和SCSS的书写方式无差别;甚至可以把现有的css文件直接改为“.scss”都可以直接使用。

css和Sass的区别也是一样的!

Sass是基于Ruby写出来的,延续了Ruby的书写规范。

书写Sass的时候不带有大括号和分号,其主要的依靠严格的缩进方式来控制;

而css就是有大括号和分号,必不可少;而且缩进方式没有那么严格的要求,甚至可以不用缩进。

代码示例:

Sass写法

body

  color: #fff

  background: #fff

 

css写法

body{

  color::#fff;

  background: #fff;

}

 

以上是关于Sass-学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

sass学习笔记--摘录

Sass学习笔记

Sass学习笔记

sass学习笔记

菜鸟的 Sass 学习笔记

Sass学习笔记