码迷,mamicode.com
首页 > Web开发 > 详细

SCSS 简单介绍

时间:2018-01-04 23:12:08      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:javascrip   需求   col   遍历   部分   css   body   pre   完全   

一.背景介绍:

css不是一种真正意义上的编程语言,不具有编程语言的变量、循环、遍历和继承等特性。

为了解决css的这些缺点,能够对css进行预处理的"中间语言"就产生了,以此来实现某些编程特性。

也就是在编写中间语言过程中,可以使用编程方式和思维,中间语言不能直接被浏览器所解析。

最后将这个中间语言编译成真正的css,这样就可以供浏览器解析使用,类同于TypeScript和JavaScript的关系。

二.关于scss:

SASS是最早的css预处理语言之一。

为了适应编程风格的需求,sass在编程风格上做了一些修改,现在称之为SCSS。

SCSS增加了一些新的功能,增强了对css3的支持,其语法完全兼容CSS3,并且继承了sass的强大功能。

任何标准的css3样式表都是具有相同语义的有效的scss文件。另外,SCSS还能识别大部分css hacks和特定于浏览器的语法,例如:古老的IE filter。由于SCSS是CSS的扩展,因此,所有在css中工作的代码也能在scss中正常工作。

现在学习scss完全没有必要关注以前sass的规则。

三.SCSS代码:

下面就是一小段SCSS代码实例,给初学者一个初步印象:

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

编译后的代码如下:

nav {
  width: 100px;
  color: #F90;
}

http://www.softwhy.com/article-3989-1.html

http://www.softwhy.com/qiduan/SCSS_source/

SCSS 简单介绍

标签:javascrip   需求   col   遍历   部分   css   body   pre   完全   

原文地址:https://www.cnblogs.com/come-on/p/8195506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!