Sass

Summary

2014/3 version: 3.2.15 current release: 3.5.4

Sass can be used from the command line or as part of a web framework. The first step is to install the gem:

$ gem insatll sass

After you convert some CSS to Sass, you can run

$ sass style.scss

to compile it back to CSS. For more information on these commands, check out

自動コンパイル

$ sass --watch app/sass:public/stylesheets

option

$red:#FF3399;

.red {
  color: $red;
}

nested - sassファイルのネストの深さが引き継がれます

$ sass style.scss:style.css --style nested

.red {
  color: #FF3399; }
  .red-.warning {
    font-weight: bold; }

expanded - 典型的なCSSの記述スタイルにする

$ sass style.scss:style.css --style expanded

.red {
  color: #FF3399;
}
.red-.warning {
  font-weight: bold;
}

compact - セレクタと属性を1行で記述してくれます

$ sass style.scss:style.css --style compact

.red { color: #FF3399; }
.red-.warning { font-weight: bold; }

compressed - すごく圧縮してくれる方法。可読性は悪いが軽くなる

$ sass style.scss:style.css --style compressed

.red{color:#f39}.red-.warning{font-weight:bold}

Syntax

Variables

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Nesting

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. You might name it something like _partial.scss. Sass partials are used with the @import directive.

// _reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

// base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

Mixins

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

When your CSS is generated it'll look like this:

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Extend/Inheritance

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow

This is what it looks like:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

The generated CSS will look like:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

scss(Sassy CSS)

Sass3.0からCSSちっくに書くことが出来るようになったsassの記法の一つ。

http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html

Syntax

Variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials

// _reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

// base.sass

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

When your CSS is generated it'll look like this:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

This is what it looks like:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators

.container { width: 100%; }


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

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

The generated CSS will look like:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Less

2010/4/23 version: 1.0 current release: 2.7.3

Less. The dynamic stylesheet language.

$ npm install less -g
or
$ npm i less --save-dev

<script src="less.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />

https://github.com/less/less.js

compile

$ lessc bootstrap.less bootstrap.css

Syntax

Variables

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

Variable Interpolation

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

compiles to

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

Nesting

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

In Less, we can also write it this way:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Partials

.foo {
  background: #900;
}
@import "this-is-valid.less";

@import statements may be treated differently by Less depending on the file extension:

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a Less file
@import "foo.css";  // statement left in place, as-is

Mixins

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

outputs

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

Extend

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

outputs

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

Operators

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

Stylus

2011/01/31 version: 0.0.1 current release: 0.54.5

https://github.com/stylus/stylus

Expressive, robust, feature-rich CSS language built for nodejs

$ npm install stylus -g

$ stylus -w style.styl -o style.css

Syntax

記法は、sassをさらに簡略化した感じ。でも、sass, scsss, less, css の書き方もできる。

#stylus
    background #eee
    padding 10px
    margin 0 0 10px
    h2 
      font-size 30px
      color blue
    .bikou
      font-size 0.8em
      &:before
        content "※"

Variables

font-size = 14px

body
 font font-size Arial, sans-serif

Partials

@import "reset.css"

Along with @import, Stylus also has @require. It works almost in the same way, with the exception of importing any given file only once.

Mixins

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)

Compiles to:

form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Extend

scss の@extendとほぼ一緒

  .message {
    padding: 10px;
    border: 1px solid #eee;
  }

  .warning {
    @extend .message;
    color: #E2E21E;
  }

Operators

 .
 []
 ! ~ + -
 is defined
 ** * / %
 + -
 ... ..
 <= >= < >
 in
 == is != is not isnt
 is a
 && and || or
 ?:
 = := ?= += -= *= /= %=
 not
 if unless

結論

それぞれ結構違うと思ったら、ほとんど変わらず、どの言語で作られているかの違いでしかなかった。だから書き方とはだいたい一緒なので、使うときも苦労しないと思う。
- ruby のprojectだったら、sass(scss)
- それ以外ならless, stylus みたいな区分でいいかな、まあパフォーマンスとか周辺ライブラリも考慮しつつ。
- lessは、コマンドのoption・仕様全体から言って、sassに比べて多機能な感じがする。でも書き方はscssに似てる。
- stylusは、書き方をかなり簡略化したい場合とかに、使えそう。

---	sass(scss)	less	stylus	golang/go
github star count	10843	15289	8708	35647
github watch count	677	752	376	2604
github fork count	1923	3458	1007	4874
made of	ruby	NodeJS	NodeJS	golang

ベンダープレフィックスなどの記述をラクにするもの。

sass →　compass less →　nib

代々木で働く22歳大学生のブログ

AltCSSについて雑多に書く。scss(sass), less, stylus

Sass

Summary

自動コンパイル

option

Syntax

Variables

Nesting

Partials

Mixins

Extend/Inheritance

Operators

scss(Sassy CSS)

Syntax

Variables

Nesting

Partials

Mixins

Extend/Inheritance

Operators

Less

Syntax

Variables

Nesting

Partials

Mixins

Extend

Operators

Stylus

Syntax

Variables

Partials

Mixins

Extend

Operators

結論

Reference from