Sass features related to Web Components

Sass

Https://en.wikipedia.org/wiki/Sass_ (Stylesheet_language)

Sass (syntactically awesome stylesheets) is a style sheet language initially designed by H Ampton Catlin and developed by Natalie Weizenbaum. ^{[2][3] after its initial versions, Weizenbaum and Chris Eppstein continu}

Website

Http://sass-lang.com

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Know:

In fact, sass rules a set of CSS syntax, this syntax is not performed on the browser, but for the convenience of writing CSS files, and maintenance convenience, by the Sass tool in the compilation environment, the sass file into a CSS file, this file can be run on the browser.

Http://sass-lang.com/guide

Git

Https://github.com/sass/sass

Installation:

Http://sass-lang.com/install

Http://www.ruanyifeng.com/blog/2012/06/sass.html

Function

Http://sass-lang.com/guide

Variables

$font-stack:    Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}

Nesting

But too deep nesting, also is not conducive to maintenance, not recommended to use.

Nav{Ul{margin: 0padding: 0list-style: none} li {display:  Inline-block} a {display:  Blockpadding: 6px 12pxtext-decoration: none}}             /span>                 

Partials

The underscore lets Sass know that the file was only a partial file and then it should not being generated into a CSS file. Sass partials is used with the @import directive.

_partial.scss

Import

// _reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}

// base.scss@import ‘reset‘;body { font: 100% Helvetica, sans-serif; background-color: #efefef;}

Mixins

   @mixin border-radius  ( $radius ) {- Webkit-border-radius:  $radius -moz-border-radius:  $radius -ms-border-radius:  $radius border-radius:  $radius ;} .box { @include border-radius ( Span class= "M" >10px);                /span>                

Extend/inheritance

.message {  border: 1px solid #ccc; padding: 10px; color: #333;}.success { @extend .message; border-color: green;}

Operators

.container { width: 100%; }article[role="main"] { float: left; width: 600px / 960px * 100%;}

Component-dependent

Components involve the following functions:

1, partials, ensure that each component of the CSS file can be managed alone.

2, extends/inheritance, inheritance can guarantee the same component, inherit the same father style.

3, mixins, you can let the same function of a set of code, in a functional way, defined together.

4, Imports, to ensure that the container control, you can combine the container of the child control style.

Sass features related to Web Components