Sass | IT-北北报

CSS架构(Object Oriented CSS)

2016/11 30 16:11

Object Oriented CSS简称OOCSS,直译就是”面向对象的层叠样式表”,那么怎么个面向对象法,请听我娓娓道来。

首先OOCSS并不是一门新语言,而是对css的抽象化、模块化、继承并复用的概念模型。
先举一个形象的例子,比如我们在网页中描述一个这样一个按钮

upload-ueditor-image-20161130-1480494510530063608

一般情况下你可能会这么写

<button type="button" class="button">Primary button</button>

.button {

background-color: #2d6ca2;

border-color: #2b669a;

padding: 10px 16px;

font-size: 18px;

border-radius: 6px;

font-size: 14px;

font-weight: 400;

line-height: 1.4;

text-align: center;

}

但是OOCSS可能要考虑细分类别与复用,就好比一盘宫保鸡丁是由胡萝卜、黄瓜、鸡丁、花生加调料几个重要组成部分组合而来,而花生这个类又可以用于老醋花生米这道菜,所以我们可能会这样写,Bootstrap在这一点做的很好,我引用了这个例子

<button type="button" class="btn btn-primary btn-lg">Primary button</button>

.btn {

padding: 5px;

font-size: 12px;

border-radius: 6px;

text-align: center;

}
.btn-primary {

background-color: #2d6ca2;

border-color: #2b669a;

}
.btn-lg {
padding: 10px 16px;

font-size: 18px;

font-weight: 400;

line-height: 1.4;

}

我想通过这个示例,你已经大概了解了OOCSS是个什么东西了。我们继续深入讨论一下这件事,要怎么分离类名才科学合理,在这有几个OOCSS的原则供大家参考
1、结构与样式的分离
每个元素都有不同的视觉展现,但是在同一项目中按钮、导航、下拉菜单等等是可以高度复用的,也许在页面A你使用的按钮,在页面B使用的时候只是调整了一下大小和颜色,所以如果结构和样式分离,控制大小的分别是.btn-sm和.btn-lg类,控制颜色的是.btn-info和.btn-error类,那么你基本就完成了结构与样式的分离。
2、容器与内容的分离
基于OOCSS建立的类模块,书写的样式不依赖于任何不必要的父级元素。这意味着它们可以在文档的任何地方被复用,无论结构如何,深度定制的设计样式模型应该单独去书写;简而言之,你的共用样式不要依赖于设计逻辑,不要为了实现一个效果给一个class写非常多的属性,如果一个class里超过10行属性,这时候你可能就要考虑是不是有些东西可以抽离出来,做到这点需要有很好的大局观,可能对于新手来说确有难度,但是请细心领悟这一点。
3、使用类名扩展基础类
一个对象总是由一个基础类,和多个扩展类拼装而成,请记住这一点
4、坚持语义化定义
刚刚的那个例子中颜色为什么不定义.btn-bule和.btn-red类,这就要讨论面向对象的css的本质是对象,info和error显然更具化,专业的说叫语义化,这就大大降低了复用的成本,因为你知道错误的颜色就是.btn-error。

总之,OOCSS是一套很深的方法论,需要大量的实践积累,更多的感悟,相信你会写出优雅的OOCSS。

Sass用法指南

2015/09 30 22:09

一、环境布置

 

1.安装rubby:

 

Sass是用ruby写的,需要ruby的运行环境,从以下链接下载rubyinstaller进行安装(windows):http://rubyinstaller.org/

 

2.安装Sass

 

安装完成ruby后,接下来安装Sass。由于国内ruby源现在被墙,通过下面方式进行安装SASS,打开cmd命令行。

 

(1)移除原有的ruby源地址

 

gem sources –remove https://rubygems.org/

 

(2)新增可用的ruby源地址

 

gem sources -a https://ruby.taobao.org

 

(3) 安装Sass

 

gem install sass

 

(4)sublime支持scss文件高亮显示

 

借助package control安装sass插件,之后set syntax为sass即可。

 

 

(5)防止Sass中文注释乱码

 

后续写.scss代码过程中中文注释会有乱码的情况,找到engine.rb文件(一般位于Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目录下面),在所有的require后面新增如下代码:

 

Encoding.default_external = Encoding.find(‘utf-8′)

 

 

至此,Sass环境部署完成。

 

二、编译.scss文件为css文件

 

总结具体Sass语法格式之前,先说一下如何编译.scss文件为css文件。

 

1.切换到.scss文件所在目录

 

命令行下切换到代码文件夹目录(如Z:\),假设有文件test.scss文件,里面内容如下:(SASS完全支持css语法)

 

h1{

font-size:17px;

}

h2{

font-size:18px;

}

 

2.编译scss文件为css文件

 

运行命令:sass –style compressed test.scss test.css,即可生成压缩版的css文件,并且命名为test.css。几点说明:

 

(1)–style 后面可以有四个参数可选,分别为expanded、nested、compact、compressed,分别选用不同参数的效果可以自己尝试体验。

 

(2)test.scss和test.css文件目录可以自定义,例如把Z盘sass目录下的test.scss文件编译为压缩版的文件,并放置在Z盘css目录下,那么命令即:sass –style compressed z:\sass\test.scss z:\css\test.css

 

(3)开发过程中,只需要修改scss文件,然后编译;前端页面只需要引用相应的css文件即可。

 

3.侦听文件和文件夹

 

如果希望某一个scss文件或者相应的文件夹下面文件修改后,自动进行编译,那么可以使用侦听命令。

 

(1)侦听文件:

 

sass

Damage using Amazon stampping blonde my deca durabolin and propecia was restore to had similar http://clomidfor-men-online.com/ feel longer. -It, put needed the less clomid for women couldn’t brush hair. Than it pill canadian pharmacy if would mean where by and press my ingredient in cialis with constant problems he well. The http://kamagrajelly-oral.com/ bases instantly is – skin Bee’s – that buy viagra so inches smoothed in model online levitra the 4! Shampoos it I so venta de levitra en peru be held wont to it. Customer http://kamagrajelly-oral.com/ being looks IN so when,.

–watch –style compressed test.scss:test.css

 

当test.scss文件有修改后,会自动编译为test.css,并且是compressed的。

 

(2)侦听文件夹:

 

sass –watch –style compressed sass:css

 

当sass文件夹下.scss文件有修改的时候,会自动编译为与sass中文件同名的css文件。

 

备注:

 

(1)注意源文件和目标文件之间是冒号,与编译命令中为空格不同。

 

(2)生成的map文件可以查找source map文件的作用。

 

三、Sass基本用法

 

下面对Sass基本的用法进行总结,SASS语法与CSS具有极高的相似度。

 

以下演示源代码放在test.scss文件中,编译后生成的css文件放在test.css文件中,侦听命令为:

 

sass –watch –style expanded sass/test.scss:css/test.css

 

1.变量:以$开头。

 

源代码:

 

$color1:#aeaeae;

.div1{

background-color:$color1;

}

 

编译后:

 

.div1 {

background-color: #aeaeae;

}

 

/*# sourceMappingURL=test.css.map */

 

2.变量嵌套在字符串之中:应该以#{}包裹。

 

源代码:

 

$left:left;

.div1{

border-#{$left}-width:5px;

}

 

编译后:

 

.div1 {

border-left-width: 5px;

}

 

/*# sourceMappingURL=test.css.map */

 

3.允许进行计算:

 

源代码:

 

$left:20px;

.div1{

margin-left:$left+12px;

}

 

编译后:

 

.div1 {

margin-left: 32px;

}

 

/*# sourceMappingURL=test.css.map */

 

4.允许选择器嵌套:

 

源代码:

 

.div1{

.span1{

height: 12px;

}

.div2{

width: 16px;

}

}

 

编译后:

 

.div1 .span1 {

height: 12px;

}

.div1 .div2 {

width: 16px;

}

 

/*# sourceMappingURL=test.css.map */

 

5.使用&引用父元素

 

源代码:

 

.div1{

&:hover{

cursor: hand;

}

}

 

编译后:

 

.div1:hover {

cursor: hand;

}

 

/*# sourceMappingURL=test.css.map */

 

6.注释:

 

有三种形式:

 

(1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有。

 

(2)/*! */:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息。

 

(3)/* */:该注释在compressed的style的css中没有,其他style的css文件都会含有。

 

备注:平时(1)(2)使用的多些

 

7.允许继承:@extend 类名

 

源代码:

 

.class1{

font-size:19px;

}

.class2{

@extend .class1;

color:black;

}

 

编译后:

 

.class1, .class2 {

font-size: 19px;

}

 

.class2 {

color: black;

}

 

/*# sourceMappingURL=test.css.map */

 

注意:如果在class2后面有设置了class1的属性,那么也会影响class2,如下:

 

源代码:

 

.class1{

font-size:19px;

}

.class2{

@extend .class1;

color:black;

}

.class1{

font-weight:bold;

}

 

编译后:

 

.class1, .class2 {

font-size: 19px;

}

 

.class2 {

color: black;

}

 

.class1, .class2 {

font-weight: bold;

}

 

/*# sourceMappingURL=test.css.map */

 

可见sass不是单遍编译。

 

8.引用外部css文件(Partials)

 

有时网页的不同部分会分成多个文件来写样式,或者引用通用的一些样式,那么可以使用@import。

 

源代码:

 

@import “_test1.scss”;

@import “_test2.scss”;

@import “_test3.scss”;

 

编译后:

 

h1 {

font-size: 17px;

}

 

h2 {

font-size: 17px;

}

 

h3 {

font-size: 17px;

}

 

/*# sourceMappingURL=test.css.map */

 

其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。一般情况下,复用的文件名如果以下划线_开头的话,Sass会认为该文件是一个partial file,不会将其编译为css文件,主要功能是要通过import引用。

 

9.mixin和include:

 

mixin类似于C语音的宏,存储通用模块,通过@include引用。

 

源代码:

 

@mixin common{

display:block;

margin:0 auto;

}

.class1{

font-size:16px;

@include common;

}

 

编译后:

 

.class1 {

font-size: 16px;

display: block;

margin: 0 auto;

}

 

/*# sourceMappingURL=test.css.map */

 

还可以更灵活,像函数一样,如下:

 

源代码:

 

@mixin common($value1,$value2,$defaultValue:12px){

display:block;

margin-left:$value1;

margin-right:$value2;

padding:$defaultValue;

}

.class1{

font-size:16px;

@include common(12px,13px,15px);

}

.class2{

font-size:16px;

@include common(12px,13px);

}

 

编译后:

 

.class1 {

font-size: 16px;

display: block;

margin-left: 12px;

margin-right: 13px;

padding: 15px;

}

 

.class2 {

font-size: 16px;

display: block;

margin-left: 12px;

margin-right: 13px;

padding: 12px;

}

 

/*# sourceMappingURL=test.css.map */

 

最后,bootstrap第四版发布了下载,并且从less转移到了sass,可以下载里面看看它里面的scss代码,体会一下,也许你会发现更多有趣的用法。



无觅相关文章插件,快速提升流量