CodePen的CSS技巧细节,sass的基本功知识知多少

CodePen的CSS才具细节

2015/01/28 · CSS · CodePen, CSS

本文由 伯乐在线 - maple 翻译,Mxt 校稿。未经许可,制止转发!
法文出处:codepen.io。应接参加翻译组。

马克 奥托和lan Feather分别分享了GitHub和Lonely Planet那七个网站中什么运用CSS,我以为本人也相应参预到那个有意思的移位之中,谈谈我们在CodePen中是怎么选取CSS的。

序言,在实习的时候,一向利用的是sass那个预管理语言,第二回接触,认为用起来非常好,那时候正是会有些简约用法,比很多尖端用法还从未关联到,不怎会接受,后来在先生的传授,自个儿上网查资料和行使中越发一箭穿心,后来在专门的职业职业中开掘厂商用的是Less,正因为有从前sass的底工,选择起来非常的慢,能快速利用,今日就把sass功底知识汇总一下,感兴趣的伴儿们看恢复生机~get起来!

@import
      Sass 援助全体css 的@法规,以至一些Sass 专项的平整,也被可以称作“指令(directive卡塔尔”.那个法规在Sass 中具有分歧的
      作用,详解如下。
      @import
        Sass 扩充了CSS 的@import 法规,让它亦可引进 SCSS 和 Sass
        文件。 全数引进的 SCSS 和 Sass 文件都会被联合并出口二个十足
        的 CSS 文件。 其它,被导入的文件中所定义的变量或 mixins 都得以在主文件中央银行使。
        @import 依照文件名引进。 暗许意况下,它会招来 Sass 文件并
        直接引进, 可是,在个别三种状态下,它会被编写翻译成 CSS 的 @import 准则:
        即便文件的扩展名师 .css
        假诺文件名以 http:// 开头
        若是文件名师url().
        假设@import 包涵了其余媒体询问(media queries卡塔 尔(英语:State of Qatar)
        如若上述情状都并未有现身,并且扩大名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就能被引进。 若无扩充名, Sass 将试
        着找寻装有 .scss 或 .sass 扩张名的同名文件并将其引进。 例如:
        @import "foo.scss";
        或
        @import "foo";
        两个都将引进foo.scss文件,而
        @import "foo.css"
        @import "foo" screen
        @import "";
        @import url(foo);
        将被编写翻译为:
        @import "foo.css";
        @import "foo" screen;
        @import "";
        @import url(foo);
      也足以经过三个 @import 引进八个文件。比如:
      将引进 rounded-corners 和text-shadow 五个文件。

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
  • 咱俩应用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那样去写.

      编写翻译为叁个 CSS 文件, 那时候,你就可以在文件名前边加贰个下划
      线,就能够制止被编写翻译。 那将报告 Sass 不要把它编写翻译成 CSS 文件。
      然后,你就能够像早前一样引进那一个文件了,并且还是能轻巧掉文
      假设您有八个 SCSS 或 Sass 文件必要引进, 然而你又不希望它被件名后面的下划线。

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

预微型机

人人对此预微处理机褒贬不豆蔻梢头,可是作者感觉假使做贰个超级大的网址项目,未有预微机是分外不便的。若你以为本身那是在过度正视工具,会让自家功用变低,那么请允许自身嗤笑你。 笔者更赏识SCSS是因为小编爱不忍释它的社区,相同的时间本身也以为它更好。但实话说,全数那个主流的预微型机(SassLESSStylus卡塔 尔(阿拉伯语:قطر‎都基本可以满足自己的急需。这里是有个别本人以为可行的性状(依据实用性依次减少少排放序卡塔尔:

  1. @import
  2. @mixin
  3. Nesting(嵌套)
  4. Variables(变量)
  5. @extend
  6. Math(数学生运动算卡塔 尔(英语:State of Qatar)
  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

      比如,你有三个文书叫做 _colors.scss。 那样就不会生成 _colors.css 文件了, 何况你还足以这么做:
      @import "colors";//不用加下划线
      来引入 _colors.scss 文件。
      注意,在同三个目录不可能而且存在湿疮划线和不麻疹划线的同名文件。 举个例子, _colors.scss 不能与 colors.scss 并存。

3. Sass的骨干天性

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

因为有Autoprefixer本条工具,作者在工作中大约无需记CSS中属性可能值。作者特地赏识它对 flexbox (伸缩布局盒) 回落的管理方式。 笔者从前用Compass正如多,但自己发觉95%的处境下都是用它管理CSS3@mixin。作者更赏识“所见即所得”这种艺术,并不是只为标前缀而随处放@include。不用Compass 之后笔者比较牵记的三个效果是生成SVG渐变,但对于仅在IE9才要求的效用来讲它也出示过于重型了,所以完全上自个儿也没怎么大损失。

3. Sass的着力特色


      嵌套 @import

变量

$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;
}

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}

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

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;
  }
}

        即便大多数时间只供给在顶层文件使用 @import 就能够了,然而,你还足以把她们带有在css 准绳和@media 准绳中。
        然后那样引用:
          #main {
            @import "example";
        }
        编写翻译出来的 CSS:
          #main .example {
              color: red;
        }
@media
    Sass 中的 @media 指令和 CSS 的行使准绳相似的简要,但它有另
    外三个效果,能够嵌套在 CSS 法规中。有一点点雷同 JS 的冒泡功用生机勃勃
    个轻巧示例:
    .siderbar{
        width:300px;
        @media screen and (orientation: landscape){
        width:500px;
        }
    }
    编译出来;
      .sidebar{
          width:300px;
      }
    @media screen and ( orientation : landscape){
    .sidebar{
      width:500px;
      }
    }
    @media 也得以嵌套@media:
    @media screen{
        .sidebar{
          @media (orientation: landscape){
            width:500px;
            }
        }
    }
    在运用@media 时还是能运用#{}:
    $media :screen;
    $feature:-webkit-min-device-pixel-ratio;
    $value:1.5;
    @media #{$media} and ($featrue:$value){
    .sidebar{
        width:500px;
        }
      }
    编写翻译出来的css:
      @media screen and (-webkit-min-device-pixel-ratio;1.5){
        .sidebar{
            width:500px;
          }
      }
@extend
    Sass 中的@extend 是用来扩公投择器可能占位符,举个例子
    .error{
      border:1px #f00;
      background-color:#fdd;
      }
    .error.intrusion{
      background-image:url("/image/hacked.png");
    }
    .seriousError{
        @extend .error;
        border-width:3px;
    }
    被编写翻译为:
      .error, .seriousError{
        border:1px #f00;
        background-color:#fdd;
      }
    .error .intrusion, .seriousError .intrusion{
        background-image: url("/image/hacked.png");
    }
    .seriousError{
        border-width:3px;
    }
    扩充选用器:
      @extend 不仅仅扩充类接收器,还足以扩当做何选用器,比方.special.cool, a:hover, 或 a.user[href^="] 例如
      .hoverlink{
          @extend a:hover;
      }
      a:hover{
          text-decoration:underline;
      }
    编写翻译出来:
      a:hover, .hoverlink{
        text-decoration:underline;
      }

嵌套

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

.clearfix{
  &:before,
  &:after {
    content:"";
    display: table;
  }
  &:after {
    clear:both;
    overflow: hidden;
  }
}

不要无节制嵌套,一切都依据实况判定

文件组织结构

被加载的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;
  }
}

**注意:不要无节制嵌套,一切都根据实况判别,假若嵌套太多层,不方便人民群众代码的护卫,借使没供给嵌套的断定要独自分离出去。 **

      .hoverlink{
        @extend a:hover;
      }
      .comment a.user:hover{
          font-weight:bold;
      }
    编写翻译出来的CSS
      .comment a.user:hover, .comment
        .user .hoverlink{
          font-weight:bold;
    }
      多少个扩张
      所设有个别样式要继续多个地方的体裁,那么能够行使@extend 来世襲的多少个选用器只怕占位符的体制,如:
      .error{
        border:1px #f00;
        background-color:#fdd;
      }
      .attention{
        font-size:3em;
        background-color:#ff0;
      }
    .seriousError{
        @extend .error;
        @extend .attention;
        border-width:3px;
    }
    编写翻译出来的css
      .error, seriousError{
          border-width:3px;
      }
    扩张单意气风发选拔器
      前边大家清楚 %placeholder 不行使@extend展现调用是不会转移
      任何样式代码。那么在增选器中使用占位符同样。比如上面包车型地铁代码
      #context a%extreme{
          color:blue;
          font-weight:bold;
          font-size:2em;
      }
    这段代码在不调用以前不发生别的代码,独有能过@extend调用之后才转移代码:
    .notice{
      @extend %extreme;
    }
    编译出来的CSS
      #context a.nontice{
        color:blue;
        font-weight:bold;
        font-size:2em;
      }
@at-root
    @at-root 从字面上解释就是跳出跟成分。当你采用器嵌套多层之
    后,想让有些选择器跳出,此时就可以利用 @at-root。来看二个
    简单的以身作则:
    .a{
      color:red;
      .b{
        color:orange;
      .c{
        color:yellow;
    @at-root .d{
      color:green;
          }
        }
      }
    }
  编写翻译出来的css
    .a{
      color:red;
    }
  .a .b{
    color:orange;
    }
  .a .b .c{
    color:yellow;
  }
  .d{
    color;green;
  }
@debug
    @debug 在 Sass 中是用来调治的,当你的在 Sass 的源码中选拔了
    @debug 指令之后,Sass 代码在编写翻译出错开上下班时间,在指令终端会输出你设置的升迁 Bug:
    @debug 10em 12em;
    会输出:
      Line 1 EEBUG: 22em
@warn
    @warn 和 @debug 功效看似,用来提携我们越来越好的调治将养 Sass。如:
    @mixin adjust-location($x,$y){
    @if unitless($x){
      @warn "Assuming #{$x} to be in pixels";
      $x: 1px *$x;
    }
    @if unitless($y){
      @warn "Assuming #{$y} to be in pixels"
        $y: 1px *$y:
      }
      position:relative; left:$x; top:$y;
    }
@error
    @error 和@warn,@debug 功用是如出生龙活虎辙。
    @mixin error($x){
        @if $x < 10{
        width:$x * 10px;
    }@else if $x == 10{
      width:$x;
    }@else{
      @error "你供给将#{$x}值设置在10以内的数";
      }
    }
  .texst{
      @include error(15);
  }
  编译的时候:
  你需求将15 值设置在10 以内的数 on line 7 at column5

混合宏

@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
button{
  @include border-radius;
}

@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);
}

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

混合宏会生成冗余代码

代码的集团结构

混合宏(@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);
}

劣势:混合宏会生成冗余代码

扩展/继承

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

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

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

不会生成冗余代码

自个儿写代码时必然会遵照的正式:【译者注:小编在原来的书文中说是生机勃勃种自闭症,表示那些标准是他迟早会奉公守法的】

  • 品质和嵌套有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;
}

亮点:不会生成冗余代码

占位符

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

mt5 和 pt5 并不会变卦最后代码

本人写代码时大约会按部就班的科班:

多少个关系密切的类当中不加空行:

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 并不会调换最后代码

插值#{}

允许在#{}内部深入分析变量

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

自己不太关爱的正统:

  • 品质的逐豆蔻年华。相关的特性(如 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);
}

注释

  1. 看似 CSS 的注解形式,使用 ”/* ”领头,结属使用 ”*/ ”
  2. 恍如 JavaScript 的笺注方式,使用“//”

两侧分别,前面七个会在编写翻译出来的 CSS 展现,后面一个在编写翻译出来的 CSS 中不博览会示

模式

本人写的代码大约会给全体的要素多个类,小编不精晓那是或不是比照了SMACSSOOCSSBEM等等,不是很在意那几个。 那并不表示自个儿从来不写嵌套(举个例子创设组合选拔器卡塔 尔(英语:State of Qatar),或许说作者对嵌套的层数需求苛刻,只是自身经常不会写太深的嵌套。 小编平常会如此写:

CSS

.box { h2 { &:after { } } }

1
2
3
4
5
6
.box {
  h2 {
    &:after {
    }
  }
}

而是作者会想:要不要给h2二个类呢?应不应当给这种头类型创立叁个得以采纳的体制呢?然后笔者会截至那样想了,因为自个儿发觉到即使这几个样式现身得丰裕频仍,那么自个儿能在事后相当的轻易改正掉,换到可选取的艺术。

完整的法规便是下降特异性。无论你代码重用做得多好,依旧时常会有亟待重写的场所,所以特异性越少,重用就可以变得更便于。不唯有如此,以这种格局重写,你以至能够在不用id选拔器可能!important的时候进行重写。

诚如的话,Rem是自家选用字体大小时候的单位,px是其他因素的高低单位。

注释

1.像样 CSS 的笺注方式,使用 ”/* ”开端,结属使用 ”*/ ”
2.相同 JavaScript 的注释格局,使用“//”
两个分别,前面三个会在编写翻译出来的 CSS 彰显,后面一个在编写翻译出来的 CSS 中不会显得

数据类型

Sass 和 JavaScript 语言相同,也会有着自个儿的数据类型,在 Sass 中满含以下两种数据类型:

  1. 数字: 如,1、 2、 13、 10px;
  2. 字符串:有引号字符串或无引号字符串,如,"foo" 'bar' baz;
  3. 颜色:如,blue, #04a3f9, rgba(255,0,0,0.5);
  4. 布尔型:如,true, false
  5. 空值:如,null
  6. 值列表:用空格或然逗号分开,如,1.5em 1em 0 2em , Helvetica, Arial, sans-serif

伸手文件

自己努力在各个页面上倡议2个或3个CSS文件:

  • global.css
  • page.css(假如不是编辑器的页面卡塔 尔(英语:State of Qatar)
  • section.css(假使需求)

沉思是硬着头皮让央求数少一些,不过又不是不过地把装有东西塞到叁个文书里。我认为在CodePen上,有太多页面特定的体制,假若把这么些都放置三个文件里,那么global.css那些文件就能够变得非常大。作者常常有不曾如此尝试过,也可以有一天尝试一下也会很有意思。小编会为它新建个分支叫:squiCSSh_it_real_good(高压版CSS)

数据类型

Sass 和 JavaScript 语言雷同,也享有友好的数据类型,在 Sass 中隐含以下两种数据类型:

  • 数字: 如,1、 2、 13、 10px;
  • 字符串:有引号字符串或无引号字符串,如,”foo” ‘bar’ baz;
  • 颜色:如,blue, #04a3f9,rgba(255,0,0,0.5);
  • 布尔型:如,true, false
  • 空值:如,null
  • 值列表:用空格或然逗号分开,如,1.5em 1em 0 2em , Helvetica, Arial, sans-serif

运算

.box {
  width: 20px   8in;
}
$full-width: 960px;
$sidebar-width: 200px;
.content {
  width: $full-width -  $sidebar-width;
}
.box {
  width: 10px * 2;
}
.box {
  width: (100px / 2);  
}
p {
  font: 10px/8px;             // 纯 CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px   8px/2px; // 使用了加( )号,是除法运算
}
.box {
  width: ((220px   720px) - 11 * 20 ) / 12 ;  
}
p {
  color: #010203   #040506;
  background-color: #010203 * 2;
}

$content: "Hello"   ""   "Sass!";
.box:before {
  content: " #{$content} ";
}

媒体询问(Media Queries

我使用@mixin做传媒询问。一时本身会想“那几个增幅或更加大”,一时会想“这些上涨的幅度或越来越小”(正是媒体询问的逻辑呀!卡塔 尔(阿拉伯语:قطر‎。那样写出来有一点啰嗦:

JavaScript

@mixin breakpoint($point) { @if ($MQs == true) { @if $point == baby-bear { @media (max-width: 500px) { @content; } } @if $point == mama-bear { @media (max-width: 700px) { @content; } } @if $point == papa-bear { @media (max-width: 800px) { @content; } } @if $point == super-bear { @media (max-width: 1280px) { @content; } } @if $point == reverso-baby-bear { @media (min-width: 501px) { @content; } } @if $point == reverso-mama-bear { @media (min-width: 701px) { @content; } } @if $point == reverso-papa-bear { @media (min-width: 801px) { @content; } } @if $point == reverso-super-bear { @media (min-width: 1281px) { @content; } } @if $point == exclusive-baby-bear { @media (max-width: 500px) { @content; } } @if $point == exclusive-mama-bear { @media (min-width: 501px) and (max-width: 800px) { @content; } } @if $point == exclusive-papa-bear { @media (min-width: 801px) and (max-width: 1280px) { @content; } } @if $point == iOS { @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) { @content; } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@mixin breakpoint($point) {
  @if ($MQs == true) {
    @if $point == baby-bear {
      @media (max-width: 500px) { @content; }
    }
    @if $point == mama-bear {
      @media (max-width: 700px) { @content; }
    }
    @if $point == papa-bear {
      @media (max-width: 800px) { @content; }
    }
    @if $point == super-bear {
      @media (max-width: 1280px) { @content; }
    }
 
    @if $point == reverso-baby-bear {
      @media (min-width: 501px) { @content; }
    }
    @if $point == reverso-mama-bear {
      @media (min-width: 701px) { @content; }
    }
    @if $point == reverso-papa-bear {
      @media (min-width: 801px) { @content; }
    }
    @if $point == reverso-super-bear {
      @media (min-width: 1281px) { @content; }
    }
 
    @if $point == exclusive-baby-bear {
      @media (max-width: 500px) { @content; }
    }
    @if $point == exclusive-mama-bear {
      @media (min-width: 501px) and (max-width: 800px) { @content; }
    }
    @if $point == exclusive-papa-bear {
      @media (min-width: 801px) and (max-width: 1280px) { @content; }
    }
 
    @if $point == iOS {
      @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {
        @content;
      }
    }
  }
}

自己只是赏识它的命名规范,平日貌似都不会用上,只是想让和煦在急需的的时候知道怎么做。

专一在地点代码第二行处@if ($MQs == true) {,笔者在颇有富含内容列表的SCSS文本中设置了开关变量。那是因为在部分页面是自适应的,有的不是,但它们常常会用到同叁个组件。若是那些页面设计最初的心愿不是自适应的(一些只是为了在Computer桌面意况中选用的页面,譬喻说大家布置的二个拖放工具,还不可能在触摸设备上利用卡塔尔国,恐怕那个页面在移动设备使用条件下会重定向到特地的本子上。在此些页面包车型大巴CSS文件中没有须要含有媒体询问(Media Queries卡塔尔,它们也用不上。

运算

sass具备运算的特性,能够对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请在意运算符前后请留多少个空格,不然会出错。

$full-width: 960px;
$sidebar-width: 200px;
.content {
  width: $full-width -  $sidebar-width;
}
p {
  font: 10px/8px;             // 纯 CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px   8px/2px; // 使用了加( )号,是除法运算
}
.box {
  width: ((220px   720px) - 11 * 20 ) / 12 ;  
}
p {
  color: #010203   #040506;
  background-color: #010203 * 2;
}

4. Sass高端本性

注释

自个儿的疏解风格十三分任性。在大相当多处境下自个儿从没会改善它,假诺在之后我读那个注释开掘小编不懂它如何看头了,只怕它和代码描述得驴头不对马嘴了,作者就能够删掉它。

CSS

.drag-from-pen-grid { padding-bottom: 52px; /* adding this to make room for pagination. A little magic-numbery... */ }

1
2
3
.drag-from-pen-grid {
  padding-bottom: 52px; /* adding this to make room for pagination. A little magic-numbery... */
}

4. Sass高档本性


@if

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    display: block;
  }
  @else {
    display: none;
  }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}

总计数据

  • CodePen少年老成共大致有158个单身的SCSS文件,find /stylesheets ! -name "*.scss" | wc -l而是未有会鬼使神差自身找不到自己要找的文书这种气象。原因如下:
  1. Sublime编辑器中找寻三个连串里的文书十分轻便
  2. 它们有完美的团体和命名,小编只必要用command –t 便能够向来跳到自家要找的文件
  • SCSS文件里一同有13,345行代码。find stylesheets/ -name '*.scss' | xargs wc –l
  • global.css大小:11.8k
  • page.css(除了编辑器,大概全部页面都有利用卡塔尔大小:5.5k
  • editor.css大小:6.2k

CSS文本而不是大家决定品质的关键因素。我们的字体大小是它的4倍,JavaScript文件大小是它的10倍。

@if

@if可一个尺度单独使用,也能够和@else结合多规格使用

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    display: block;
  }
  @else {
    display: none;
  }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}

@for

@for $i from <start> through <end>
@for $i from <start> to <end>
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i   $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

关于我

我们三人对大多的网址建设办事都三头加入,不过多少部分的专门的学业是我们四个分别担负的,小编正是单身担当CSS这一块。 笔者一定要提的是,尽管自己自感觉本人的行事情势是七个很棒的格局,可是也许有望它只符合本身用,在人家看来好像有一点意外。 作者有二个亟待纠正之处是把要做的业务(TODO’s卡塔 尔(英语:State of Qatar)写在标题追踪里实际不是写在代码里。小编并从未工具能够唤起本人在代码中写下的要做的业务(TODO’s卡塔尔,所以那些事情常常被小编忘了。 笔者希望以后大家能够有更多的队友,然后小编会找寻叁个能力所能达到让大家都适应的行事方式。

@for

for循环有二种样式,分别为:@for $var from <start> through <end>和@for $var from <start> to <end>。$i代表变量,start表示初叶值,end表示甘休值,那五个的分化是首要字through表示包括end这一个数,而to则不富含end那几个数。

@for $i from <start> through <end>
@for $i from <start> to <end>
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i   $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

@each

$list: adam john wynn mason kuroir; //$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("vatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

前程张望

  • 本身并未使用自动物检疫查代码错误的工具,不过在今后自个儿大概会用到。大家在JavaScript中央银行使机动物检疫查代码错误的工具了,并且开采它的确很有实惠。
  • 自身今天尚未曾应用sourcemaps【译者注:详见
  • 自己明日并不曾开创多个真正意义上的模版库。不过思忖到这几个网址也是用到了模版,所以自身感觉建叁个视觉模板库也是叁个好主意。那样在不菲地点都足以一贯拿来用,特别惠及也更为模块化。

    赞 收藏 评论

@each

语法为:@each $var in <list or map>。在那之中$var表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加盟了多字段循环和map数据循环。

$list: adam john wynn mason kuroir; //$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("vatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

5. Sass中的函数

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

全体的停放函数

  • 字符串函数

    • unquote
    • quote
    • To-upper-case
    • To-lower-case
    • percentage
    .footer{
      width : percentage(.2)
    }
    
  • round
  • ceil
  • floor
  • abs
  • min
  • max
  • random
  • 列表函数

    • length 取列表数据的长度
    • nth (10px 20px 30px, 1)
    • join join(10px 20px, 30px 40px)
    • append append(10px 20px ,30px)
    • zip zip(1px 2px 3px,solid dashed dotted,green blue red)
    • index index(1px solid red, solid)
    • type-of type-of(100)
    • unit 取单位
    • unitless 决断壹个值是不是含有单位
    • comparable 推断多个数是还是不是足以开展加减合并
    • if(true,1px,2px)
  • Maps 函数

    • map-get
    • map-has-key
    • map-keys
    • map-values
    • map-merge
    • map-remove
    • keywords
    $map: (
      $key1: value1,
      $key2: value2,
      $key3: value3
    )   
    
    $map: (
      key1: value1,
      key2: (
        key-1: value-1,
        key-2: value-2,
      ),
    key3: value3
    );
    
    $theme-color: (
      default: (
          bgcolor: #fff,
          text-color: #444,
          link-color: #39f
      ),
      primary:(
          bgcolor: #000,
          text-color:#fff,
          link-color: #93f
      ),
      negative: (
          bgcolor: #f36,
          text-color: #fefefe,
          link-color: #d4e
      )
    );
    
    /* map-get */
    $social-colors: (
      dribble: #ea4c89,
      facebook: #3b5998,
      github: #171515,
      google: #db4437,
      twitter: #55acee
    );
    .btn-dribble{
      color: map-get($social-colors,facebook);
    }
    /* 没有值不会报错 */
    .btn-weibo{
      font-size: 12px;
      color: map-get($social-colors,weibo);
    }
    
    /* map中的容错函数 */
    @function colors($color){
      @if not map-has-key($social-colors,$color){
          @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
      }
      @return map-get($social-colors,$color);
    }
    .btn-dribble {
      color: colors(dribble);
    }
    
    /* each 遍历 map */
    @each $name in map-keys($social-colors){
      .btn-#{$name}{
          color: colors($name);
      }
    }
    @for $i from 1 through length(map-keys($social-colors)){
      .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
      }
    }
    
    map-values($social-colors)
    /*得到所有的值*/
    
    $color: (
      text: #f36,
      link: #f63,
      border: #ddd,
      backround: #fff
    );
    $typo:(
      font-size: 12px,
      line-height: 1.6
    );
    $newcolor = map-merge($color, $typo);
    
    /* 得到新值 */
    $map:map-remove($social-colors,dribble);
    
  • 水彩函数

    • rgb

    • rgba

    • red

    • green

    • blue

    • mix 混合二种颜色 第多个参数为第意气风发种颜色的百分比 mix(blue,red,伍分之一)

    • lighten lighten(red, 20%);

    • darken darken(red,30%);

    • saturate 改换颜色的饱和度 参数单位为百分比 saturate(blue,五分之二)

    • desaturate

    • adjust-hue 通过调治色相 adjust-hue(blue,30deg)

    • grayscale 直接让饱和度为0 grayscale(blue);

    • 阿尔法 获取发光度

    • opacity 获取发光度

    • rgba

    • opacify 扩大折射率

    • fade-in 增添发光度

    • transparentize 收缩反射率

    • fade-out 减弱光滑度

    <ul class="swatches red">
      <li></li>
      ...      
      <li></li>
    </ul>
    <ul class="swatches orange">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches yellow">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches green">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches blue">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches purple">
      <li></li>
      …
      <li></li>
    </ul>
    
    $redBase: #DC143C;
    $orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
    $yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
    $greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
    $blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
    $purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
    $blackBase: #777;
    $bgc: #fff;
    
    //定义颜色变暗的 mixin
    @mixin swatchesDarken($color) {
      @for $i from 1 through 10 {
        $x:$i 11;
        li:nth-child(#{$x}) {
          $n:$i*5;
          $bgc:darken($color,$n); //颜色变暗
          background-color: $bgc;
          &:hover:before { //hover状态显示颜色编号
            content: "#{$bgc}";
            color: lighten($bgc,40);
            font-family: verdana;
            font-size: 8px;
            padding: 2px;
          }
        }
      }
    }
    //定义颜色变亮的 mixin
    @mixin swatchesLighten($color) {
      @for $i from 1 through 10 {
        $x:11-$i;
        li:nth-child(#{$x}) {
          $n:$i*5;
          $bgc:lighten($color,$n);
          background-color: $bgc;
          &:hover:before {
            content: "#{$bgc}";
            color: darken($bgc,40);
            font-family: verdana;
            font-size: 8px;
            padding: 2px;
          }
        }
      }
    }
    
    .swatches li {    
      width: 4.7619047619%;
      float: left;
      height: 60px;
      list-style: none outside none;
    }
    
    ul.red {
      @include swatchesLighten($redBase);
      @include swatchesDarken($redBase);
      li:nth-child(11) {
        background-color: $redBase;
      }
    }
    
    ul.orange {
      @include swatchesLighten($orangeBase);
      @include swatchesDarken($orangeBase);
      li:nth-child(11) {
        background-color: $orangeBase;
      }
    }
    
    ul.yellow {
      @include swatchesLighten($yellowBase);
      @include swatchesDarken($yellowBase);
      li:nth-child(11) {
        background-color: $yellowBase;
      }
    }
    
    ul.green {
      @include swatchesLighten($greenBase);
      @include swatchesDarken($greenBase);
      li:nth-child(11) {
        background-color: $greenBase;
      }
    }
    
    ul.blue {
      @include swatchesLighten($blueBase);
      @include swatchesDarken($blueBase);
      li:nth-child(11) {
        background-color: $blueBase;
      }
    }
    
    ul.purple {
      @include swatchesLighten($purpleBase);
      @include swatchesDarken($purpleBase);
      li:nth-child(11) {
        background-color: $purpleBase;
      }
    }
    
    ul.black {
      @include swatchesLighten($blackBase);
      @include swatchesDarken($blackBase);
      li:nth-child(11) {
        background-color: $blackBase;
      }
    }
    

关于小编:maple

图片 2

西安北大大三野生码农叁个,希望能做多个有情感的工程师。博客园新浪:@Maple_eitgithub: 个人主页 · 小编的稿子 · 10

图片 3

5. Sass中的函数

sass定义了好些个函数可供使用,当然你也足以自个儿定义函数,以@fuction起头。sass的官方函数链接为:sass fuction,实际项目中我们采纳最多的应当是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都以颜色值,第1个参数都以比例。

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

6. Sass的@规则

  • @import

  • @media

    .sidebar {
      width: 300px;
      @media screen and (orientation: landscape) {
        width: 500px;
      }
    }
    @media screen {
      .sidebar {
        @media (orientation: landscape) {
          width: 500px;
        }
      }
    }
    
    $media: screen;
    $feature: -webkit-min-device-pixel-ratio;
    $value: 1.5;
    
    @media #{$media} and ($feature: $value) {
      .sidebar {
        width: 500px;
      }
    }
    
  • @extend

  • @at-root

  • @debug

  • @warn

  • @error

  • @content

    $small : 750px;
    @mixin  onsmall {
      @media  only screen and (max-width: $small){
        @content;
      }
    }
    
    .navbar-content{
      max-width:980px;
      @include onsmall {
        min-width:320px;
      }
    }
    
@mixin useRem($size){
  $device-list : 320px, 375px , 414px;
  html{
    @each $device in $device-list{
      @media screen and (min-width: $device){
        font-size: 100px * ($device/$size);
      }
    }
  }
}
@include useRem(750px);

意气风发体的内置函数

  • 字符串函数

  • unquote

  • quote

  • To-upper-case

  • To-lower-case

  • percentage

  • round

  • ceil

  • floor

  • abs

  • min

  • max

  • random

  • 列表函数

  • length 取列表数据的长度

  • nth (10px 20px 30px, 1)

  • join join(10px 20px, 30px 40px)

  • append append(10px 20px ,30px)

  • zip zip(1px 2px 3px,solid dashed dotted,green blue red)

  • index index(1px solid red, solid)

  • type-of type-of(100)

  • unit 取单位

  • unitless 剖断三个值是还是不是含有单位

  • comparable 决断七个数是还是不是足以扩充加减合併

  • if(true,1px,2px)

  • Maps 函数

  • map-get

  • map-has-key

  • map-keys

  • map-values

  • map-merge

  • map-remove

  • keywords

/* map-get */
$social-colors: (
  dribble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}
/* 没有值不会报错 */
.btn-weibo{
  font-size: 12px;
  color: map-get($social-colors,weibo);
}

/* map中的容错函数 */
@function colors($color){
  @if not map-has-key($social-colors,$color){
      @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
  }
  @return map-get($social-colors,$color);
}
.btn-dribble {
  color: colors(dribble);
}

/* each 遍历 map */
@each $name in map-keys($social-colors){
  .btn-#{$name}{
      color: colors($name);
  }
}
@for $i from 1 through length(map-keys($social-colors)){
  .btn-#{nth(map-keys($social-colors),$i)} {
    color: colors(nth(map-keys($social-colors),$i));
  }
}

map-values($social-colors)
/*得到所有的值*/

$color: (
  text: #f36,
  link: #f63,
  border: #ddd,
  backround: #fff
);
$typo:(
  font-size: 12px,
  line-height: 1.6
);
$newcolor = map-merge($color, $typo);

/* 得到新值 */
$map:map-remove($social-colors,dribble);
  • 水彩函数

sass中融为生机勃勃体了大气的颜色函数,让转变颜色特别简便易行。

  • rgb、 rgba
  • mix 混合三种颜色 第七个参数为第生机勃勃种颜色的比重 mix(blue,red,40%)
  • lighten lighten(red, 20%);
  • darken darken(red,30%);
  • saturate 改造颜色的饱和度 参数单位为百分比 saturate(blue,五分之二)
  • adjust-hue 通过调节色相 adjust-hue(blue,30deg)
  • grayscale 直接让饱和度为0 grayscale(blue);
  • 阿尔法、opacity 获取发光度
  • opacify、 fade-in 增添折射率
  • transparentize 、 fade-out裁减反射率
<ul class="swatches red">
  <li></li>
  ...      
  <li></li>
</ul>
<ul class="swatches orange">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches yellow">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches green">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches blue">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches purple">
  <li></li>
  …
  <li></li>
</ul>

$redBase: #DC143C;
$orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
$blackBase: #777;
$bgc: #fff;

//定义颜色变暗的 mixin
@mixin swatchesDarken($color) {
  @for $i from 1 through 10 {
    $x:$i 11;
    li:nth-child(#{$x}) {
      $n:$i*5;
      $bgc:darken($color,$n); //颜色变暗
      background-color: $bgc;
      &:hover:before { //hover状态显示颜色编号
        content: "#{$bgc}";
        color: lighten($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}
//定义颜色变亮的 mixin
@mixin swatchesLighten($color) {
  @for $i from 1 through 10 {
    $x:11-$i;
    li:nth-child(#{$x}) {
      $n:$i*5;
      $bgc:lighten($color,$n);
      background-color: $bgc;
      &:hover:before {
        content: "#{$bgc}";
        color: darken($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}

.swatches li {    
  width: 4.7619047619%;
  float: left;
  height: 60px;
  list-style: none outside none;
}

ul.red {
  @include swatchesLighten($redBase);
  @include swatchesDarken($redBase);
  li:nth-child(11) {
    background-color: $redBase;
  }
}

ul.orange {
  @include swatchesLighten($orangeBase);
  @include swatchesDarken($orangeBase);
  li:nth-child(11) {
    background-color: $orangeBase;
  }
}

ul.yellow {
  @include swatchesLighten($yellowBase);
  @include swatchesDarken($yellowBase);
  li:nth-child(11) {
    background-color: $yellowBase;
  }
}

ul.green {
  @include swatchesLighten($greenBase);
  @include swatchesDarken($greenBase);
  li:nth-child(11) {
    background-color: $greenBase;
  }
}

ul.blue {
  @include swatchesLighten($blueBase);
  @include swatchesDarken($blueBase);
  li:nth-child(11) {
    background-color: $blueBase;
  }
}

ul.purple {
  @include swatchesLighten($purpleBase);
  @include swatchesDarken($purpleBase);
  li:nth-child(11) {
    background-color: $purpleBase;
  }
}

ul.black {
  @include swatchesLighten($blackBase);
  @include swatchesDarken($blackBase);
  li:nth-child(11) {
    background-color: $blackBase;
  }
}

6. Sass的@规则


  • @import(sass的导入准则和CSS的判若两人,编写翻译时会将@import的scss文件合併进来只生成一个CSS文件。卡塔 尔(英语:State of Qatar)

  • @media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
  • @extend

  • @at-root

  • @debug

  • @warn

  • @error

  • @content

$small : 750px;
@mixin  onsmall {
  @media  only screen and (max-width: $small){
    @content;
  }
}

.navbar-content{
  max-width:980px;
  @include onsmall {
    min-width:320px;
  }
}

//响应式让适应设备的屏幕尺寸
@mixin useRem($size){
  $device-list : 320px, 375px , 414px;
  html{
    @each $device in $device-list{
      @media screen and (min-width: $device){
        font-size: 100px * ($device/$size);
      }
    }
  }
}
@include useRem(750px);

sass的底工知识基本就是那几个,在职业中,常用到的也是变量,嵌套,混合宏,甚至他的高档次和等第个性和函数,何况只要调节了生机勃勃种预管理语言,未来学习另意气风发种就能轻便超多,就能够心照不宣,立即刻手了,所以根底驾驭稳定至关心爱惜要。假设大家想深刻学习驾驭,能够团结安装上试风度翩翩试,用大器晚成用,会帮您少写过多代码哦!

本文由星彩网app下载发布于前端技术,转载请注明出处:CodePen的CSS技巧细节,sass的基本功知识知多少

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。