CSS扩展语言

Wesley13 等级 370 0 0

CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有!

// 语法
// <custom-preperty-name> 自定义属性名
// <declaration-value>声明值(回退值)
// var( <custom-preperty-name>, <declaration-value>? )

:root {
  --main-bg-color: pink;
}
body {
  background-color: var(--main-bg-color, blue);
}

它也同ES6一样存在浏览器未部署不兼容的情况,即便它给了var()来打造变量,它仍旧显得很笨重!我提一个组件样式,为了避免样式冲突每次就得在前面加上一个组件唯一标识,就像这样:

.my-content article h1 { color: #333 }
.my-content article p { margin-bottom: 1.4em }
.my-content aside { background-color: #EEE }

得亏CSS扩展语言出现了,它为CSS引入了变量、混合器等等语法,让CSS得到模块化发展。CSS扩展语言大体上差不多,具体使用哪个语言来工作取决于开发者个人喜好,这里以Sass/SCSS举例。先说下这两位的区别,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。

.my-content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

这样感觉就好多了,层级结构清晰,编译后就达到人工手写的样子。Sass也可以配合CSS选择器:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
}

Sass的结构是呈父子级关系,有时需要引用同级(&):

article a {
  color: blue;
  body.ie & { color: green }
  &:hover { color: red }
}

如果你感觉CSS属性有时候也挺烦躁的,可以使用属性嵌套,把属性名从中划线的地方断开,紧跟{}块。

// 这个例子不恰当,CSS本身可以简写
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
// 编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
// 属性简写
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
// 编译后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

Sass赋予CSS模块的能力,开发者可以将变量单独放在一些文件来方便自定义样式,可以根据需求分出不同的文件。这时就需要用到@import,CSS不常用的一个特性。通常会只想生成少数几个css文件来减少请求,Sass有一个特殊的约定:文件名以下划线开头。这样Sass就不会在编译时单独编译这个文件输出CSS,而只把这个文件导入,@import也不需要写全名。

// themes/_night-sky.scss
@import "themes/night-sky";

假如你定义了一个变量的文件来供使用者改变里面的默认值,然而反复声明一个变量只有最后一处会有效覆盖前边的值,这时需要!default。

$link-color: blue;
$link-color: red;
a {
  color: $link-color;  /* red */
}
// 修改:
$link-color: blue !default;

@import还允许写在CSS规则内,Sass会将局部文件的CSS规则插入到导入的位置:

// _blue-theme.scss
aside {
  background: blue;
  color: white;
}

// import
.blue-theme {@import "blue-theme"}
// 编译后
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

因为Sass完全兼容CSS,所以它支持原生的@import,如果要导入原生CSS,须将后缀.css改为.scss再导入。

CSS的样式通常是给开发者内部的样式说明并不希望浏览者能看到,Sass提供了静默注释/* .... */。

为了使得网站的风格得到统一,那么统一使用变量处理是非常不错的选择,但是当样式越来越复杂,有一大段的样式要重用,独立变量就没办法了。这时需要混合器@mixin,如border-radio的兼容:

// @mixin
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// @include
.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;
}

那么什么时候使用@mixin呢?当不断重复使用一段样式,尤其是这段样式本身是一个逻辑单元。@mixin可以嵌套css规则,还可以进行传参及缺省参数:

// @mixin
@mixin rounded-corners($value:5px) {
  -moz-border-radius: $value;
  -webkit-border-radius: $value;
  border-radius: $value;
}

// @include
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners(15px);
}
// 编译后
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

增加代码的复用的另一个方法就是继承@extend:

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

继承和混合器的区别:继承是基于类建立在语义关系上;混合器是展示性样式的重用。在Sass里,它们实际给人的感觉没有太大差别,用哪一个最后效果都一样,直观感受有差别。比如上面的.error,然后下面对不同的错误类进行细化,形成一种递进的关系,继承比混合器更适合。

(小声嘀咕:蛮喜欢Less的混合器写法,没有那么多的命令。)

这儿提到继承和混合,顺便说一下在面向对象的编程语言中,继承(Inheritence)和混入(Mixin)之间的区别。

继承描述了一个对象是什么,而混入描述了这个对象能做什么。比如柯基犬属于犬科动物类,犬科动物又属于动物类。将拥有共性的属性、行为的事物抽象归为一体就是父类,子类拥有父类的共性,这就是继承。柯基犬会吃,人也会吃,多啦A梦也会吃。多啦A梦还拥有飞的技能,小鸟也会飞,飞机也能飞。它们归属于不同的类,拥有一种共性行为,定义这些行为然后赋予拥有这些行为的对象,这就是混入。

好了,CSS扩展语言就说到这儿,具体的全看技术选型。

收藏
评论区

相关推荐

CSS
css垂直渐变   #example3        {         /\* fallback \*/         background-color:#063053;         /\* chrome 2+, safari 4+; multiple color stops \*/         background-image:-we
CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色; 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) b
SASS入门教程及用法指南
作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这些问题,我们现在来引进一个[SASS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.haoro
CSS之border绘制三角形
用CSS的border可以画出高质量的三角形。 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px
CSS的相对定位和绝对定位(position)
什么是定位呢? ======= `定位(position)`,故名思议,就是确定元素在页面中的位置。 CSS的常用定位有两种,一种是相对定位,一种是绝对定位。 下面我们看例子 1. `<html>` 2. `<head>` 3. `<style>` 4. `#div0 {` 5. `/* 设置背景色为黄色 */` 6. `backgrou
CSS预处理器SASS用法和koala工具的使用
    最近在学习前端的时候,发现了一个SASS(CSS预处理器),感觉在前端布局写css样式来说是相当强大,效率又高,在用到SASS的时候感觉很爽。     首先说一下传统的CSS,在程序员的眼里感觉是一个很麻烦的东西,没有变量,也没有运算,还没有条件语句,感觉写的相当费事。     在人们都感觉费事的同时,真有牛人把CSS加入了编程的元素,这就是(CS
CSS预编译器:Sass(入门),更快的前端开发
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
DIVcss背景图片固定居中,div阴影,背景半透明,div圆角,DIV渐变 【mark用】
< html \> < head \> < meta http-equiv \="Content-Type" content \="text/html; charset=utf-8" /> < title \> CSS test </ title \> < style type \="text/css" \> body { mar
HTML 使用CSS 设置透明度Opacity
HTML/CSS标签透明度效果的实现 ------------------ 在HTML+CSS编程中,实现半透明背景,通常有3中做法,分别是使用RGBA,PNG和CSS filter。 ### 方法一. 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H5中的办透明背景颜色只支持 rgba的写法,不支持16进制的写法如: ba
HTML5+CSS+JQuery 实现简单的进度条功能
样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2C; height:25px; border-radius
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass
**嵌套规则 (Nested Rules)** ----------------------- Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 #main p { color: #00ff00; width: 97%; .redbox {
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Sass预编译
sass基于Ruby               ruby的模块管理器叫gem   正规的安装方式是gem install sass                调用命令     sass    sass文件    css文件 **webpack编译sass**         需要的模块 style-loader  css-loader  sas
vue 中安装使用sass 报错遇到的问题整理
不出错的情况下,正常安装: **1.**安装包: `npm install node-sass --save-dev` `npm install sass-loader --save-dev` (sass-loader依赖于node-sass) **2.**在build文件夹下的webpack.base.conf.js的rules里面添加配置