sass的基础知识知多少,CodePen的CSS技术细节

作者: 前端知识  发布:2019-09-26

CodePen的CSS技术细节

2015/01/28 · CSS · CodePen, CSS

本文由 伯乐在线 - maple 翻译,Mxt 校稿。未经许可,禁止转载!
英文出处:codepen.io。欢迎加入翻译组。

Mark Otto和lan Feather分别分享了GitHub和Lonely Planet这两个网站中如何应用CSS,我觉得我也应该参与到这个有趣的活动之中,谈谈我们在CodePen中是怎么应用CSS的。

前言,在实习的时候,一直使用的是sass这个预处理语言,第一次接触,感觉用起来特别好,当时就是会一些简单用法,很多高级用法还没有涉及到,不怎么会使用,后来在老师的讲解,自己上网查资料和应用中越来越熟练,后来在正式工作中发现公司用的是Less,正因为有之前sass的基础,接受起来特别快,能快速使用,今天就把sass基础知识汇总一下,感兴趣的同伴们看过来~get起来!

概览

  • 预处理器使用了SCSS
  • 我们使用Autoprefixer
  • 我们使用Rails Asset Pipeline
  • 实际加载的那些可解释为CSSSCSS文件其实就是一个包含各模块的目录
  • 我们有一个统一样式,主要原因是这样看起来一致性更好
  • 我们不使用任何特别的“CSS架构”,只使用类
  • 每一个网页中不超过2-3个CSS文件
  • 媒体查询我们使用可以关掉的@mixin
  • 我们鼓励注释
  • 一些统计数据
  • 在本文中“我们”这个词大多数只代表我一个
  • 未来展望和期待

1. Sass简介


Sass 是一种css预处理器,CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

除了sass还有一些其他常见的预处理语言

  • Less
  • Stylus

Sass 有时候也被称为 SCSS,两者之间不同之处有以下两点

  • 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  • 语法书写方式不同,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文件中可以完全像写正常的css那样去写.

预处理器

人们对于预处理器褒贬不一,但是我觉得如果做一个比较大的网站项目,没有预处理器是非常困难的。若你认为我这是在过度依赖工具,会让我效率变低,那么请允许我嘲笑你。 我更喜欢SCSS是因为我喜欢它的社区,同时我也认为它更好。但实话说,所有这些主流的预处理器(SassLESSStylus)都基本可以满足我的需求。这里是一些我觉得有用的特性(按照实用性递减排序):

  1. @import
  2. @mixin
  3. Nesting(嵌套)
  4. Variables(变量)
  5. @extend
  6. Math(数学运算)
  7. Loops(循环)
  8. 长时间用它们工作,帮助我理解那些炫酷的小例子

不用预处理器我无法想象要花多大的精力才能取代这些特性。

2. sass安装


npm install -g node-sass
node-sass -w xxx.scss xxx.css --output-style expanded
node-sass 参数:

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info

在CSS属性中加与浏览器相关的前缀

因为有Autoprefixer这个工具,我在工作中几乎不需要记CSS中属性或者值。我特别喜欢它对 flexbox (伸缩布局盒) 回退的处理方式。 我以前用Compass比较多,但我发现95%的情况下都是用它处理CSS3@mixin。我更喜欢“所见即所得”这种方式,而不是只为标前缀而到处放@include。不用Compass 之后我比较怀念的一个功能是生成SVG渐变,但对于仅在IE9才需要的功能来说它也显得过于重型了,所以总体上我也没什么大损失。

3. Sass的基本特性


Rails

我是Rails Asset Pipeline的粉丝,它实在太好用了。 举个例子: 我把句话放在视图中:

JavaScript

<%= stylesheet_link_tag "about/about" %>

1
&lt;%= stylesheet_link_tag &quot;about/about&quot; %&gt;

然后它会产生一个我需要的CSS文件:

CSS

<link href="" media="screen" rel="stylesheet" type="text/css" />

1
<link href="http://assets.codepen.io/assets/about/about-a05e4bd3a5ca76c3fb17f2353fedbd99.css" media="screen" rel="stylesheet" type="text/css" />

我们在资源里把终止时间写得离现在远一点。

图片 1

我们每一次部署的时候,它都会通过重新生成随机数来重新缓存,所以这是一个非常棒的缓存机制。 我们在CodePen中只是对JavaScript使用Sprockets。有了它我们可以这么干:

JavaScript

//= require common/whatever.js //= require_tree ./../hearting/

1
2
//= require common/whatever.js
//= require_tree ./../hearting/

你也可以在CSS这么做,但何必自寻烦恼呢,因为: 1. Sass能够实现这个功能 2. 如果你用Sass实现这个功能,那依赖性表现更好。像$variables@mixin都能够在文件之间应用了。 我们并不会把CSS文件上传到Git仓库中,这样对Git很好,所有的资源都在部署的时候进行解释编译。

变量:

sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。方便统一修改和维护。

$brand-primary : darken(#428bca, 6.5%) !default; //定义变量
$btn-primary-color : #fff !default;//定义变量
$btn-primary-bg : $brand-primary !default;//定义变量
$btn-primary-border : darken($btn-primary-bg, 5%) !default;//定义变量
.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

/* 局部变量 */
$color: orange !default;
.block {
  color: $color;
}
em {
  $color: red;
  a {
    color: $color;
  }
}

文件组织结构

被加载的CSS文件会有一份对应的SCSS,这个SCSS文件中没有任何实际的CSS代码,而是用来描述CSS文件中的内容。举个例子,这是我们现在的global.scss

JavaScript

// General Dependencies @import "global/colors"; @import "global/bits"; // Base @import "global/reset"; @import "global/layout"; // Areas @import "global/header"; @import "global/footer"; // Patterns @import "global/typography"; @import "global/forms"; @import "global/toolbox"; @import "global/buttons"; @import "global/modals"; @import "global/messages"; @import "global/badges"; // 第三方组件 // (目前没有)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// General Dependencies
@import &quot;global/colors&quot;;
@import &quot;global/bits&quot;;
 
// Base
@import &quot;global/reset&quot;;
@import &quot;global/layout&quot;;
 
// Areas
@import &quot;global/header&quot;;
@import &quot;global/footer&quot;;
 
// Patterns
@import &quot;global/typography&quot;;
@import &quot;global/forms&quot;;
@import &quot;global/toolbox&quot;;
@import &quot;global/buttons&quot;;
@import &quot;global/modals&quot;;
@import &quot;global/messages&quot;;
@import &quot;global/badges&quot;;
 
// 第三方组件
// (目前没有)

我试着坚持这样做,但每当我向一个本应被全部导入的文件中添加代码时,老是会抛出一堆异常。我应该弄个通告文件然后写上:

CSS

@import "shame"; // 注意有点条理啊,里面这几个魂淡。

1
@import "shame"; // 注意有点条理啊,里面这几个魂淡。

嵌套

sass指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。
在选择器嵌套中,可以使用&表示父元素选择器。

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}
.clearfix{
  &:before,
  &:after {
    content:"";
    display: table;
  }
}

**注意:不要无节制嵌套,一切都根据实际情况判断,如果嵌套太多层,不利于代码的维护,如果没必要嵌套的一定要单独分离出去。 **

代码的组织结构

混合宏(@mixin)

sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。

@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;//兼容处理
  border-radius: $radius;
}
.nav{
  @include border-radius;
}
.box{
  @include border-radius(3px);
}

@mixin center($width,$height){//居中处理
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px,300px);
}

缺点:混合宏会生成冗余代码

我写代码时一定会遵循的规范:【译者注:作者在原文中说是一种强迫症,表示这些规范是他一定会遵循的】

  • 属性和嵌套有2个空格的缩进
  • 在选择器(selectors)之后或”{“前面加一个空格
  • 一行一个属性声明
  • 在”:”(冒号)后面加一个空格
  • 尾部的”}”符号另起一行,并与选择器同等缩进
  • 0 作为长度的时候不加单位
  • 名称中使用连字符”-”而不用下划线”_”

扩展/继承( @extend)

sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

优点:不会生成冗余代码

我写代码时大多会遵循的规范:

两个联系密切的类中间不加空行:

CSS

.thing { } .related-thing { }

1
2
3
4
5
6
.thing {
 
}
.related-thing {
 
}

有一点联系的两个类之间加一个空行:

CSS

.thing { } .another-thing { }

1
2
3
4
5
6
7
.thing {
 
}
 
.another-thing {
 
}

没什么联系的内容留两空行:

CSS

.thing { } .totally-different-thing { }

1
2
3
4
5
6
7
.thing {
 
}
 
.totally-different-thing {
 
}

占位符(%)

优势:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}

mt5 和 pt5 并不会生成最终代码

我不太关心的规范:

  • 属性的顺序。相关的属性(如 height/width)一般会放一起,但不会特别在意这个。
  • 注释方式。两种都可以用

在实际的工作中,我甚至也不会严格按照自己的规范写。

插值#{}

特殊变量—— 一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

$properties: (margin, padding);
@mixin set-value($side, $value) {
  @each $prop in $properties {
    #{$prop}-#{$side}: $value;
  }
}
.login-box {
  @include set-value(top, 14px);
}

本文由金沙澳门官网发布于前端知识,转载请注明出处:sass的基础知识知多少,CodePen的CSS技术细节

关键词: 金沙澳门官网