http://www.web008.net

美高梅手机版:CodePen的CSS技术细节,sass的基础知识知多少

CodePen的CSS技能细节

2015/01/28 · CSS · CodePen, CSS

本文由 伯乐在线 - maple 翻译,Mxt 校稿。未经许可,禁止转发!
丹麦语出处:codepen.io。招待出席翻译组。

Mark 奥托和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的变量必需是$伊始,前面紧跟变量名,而变量值和变量名之间就必要接受冒号(:卡塔尔(英语:State of Qatar)分隔离(就好像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卡塔尔(英语:State of Qatar)之后或”{“前边加一个空格
  • 意气风发行壹天性质证明
  • 在”:”(冒号卡塔尔(英语:State of Qatar)后边加多个空格
  • 尾巴部分的”}”符号另起意气风发行,并与选用器同等缩进
  • 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);
}

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。