Sass Tutorial - 1: Nesting - ITコンサルの日常

概要

原文

Often when writing CSS, you'll have several selectors that all begin with the same thing. For example, you might have “#navbar ul”, “#navbar li”, and “#navbar li a”. It's a pain to repeat the beginning over and over again, especially when it gets long.

Sass allows you to avoid this by nesting the child selectors within the parent selector.

超意訳

CSSを書いていると、時々同じ要素で始まるセレクタを書いていることがあります。
例えば、“#navbar ul”, “#navbar li”, and “#navbar li a”などです。
同じ要素を何度も繰り返すのは、特にその要素が長い場合に、苦痛を伴います。

Sassを使うと、親セレクタに子セレクタをネストさせることによって、この繰り返しを避けられます。

概要が分かったところで、早速サンプルを動かしてみる。

サンプル

scssファイル

/* style.scss */

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

cssファイル (sassコマンドにより自動生成)

/* style.scss */
#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }

style.scssでは、#navbarは1回しか書いてないのに、
style.cssでは、#navbarが複数回出てきているところがミソですね。

試しにhtmlファイルから生成されたcssファイルを読んでみる

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <title>index</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
    <div id = "navbar">
        <ul>
            <li><a href = "http://www.google.co.jp/">Google</a></li>
            <li><a href = "http://www.yahoo.co.jp/">Yahoo</a></li>
        </ul>
    </div>
</body>
</html>

html表示結果

navbarって言われてみればnavbarみたいな？？

続き

原文

Notice how the output is formatted to reflect the original nesting of the selectors. This is the default CSS style, but there are other styles for all sorts of CSS formatting preferences. There's even one for compressing the CSS as much as possible!

You can also nest properties, so you don't have to repeat stuff like “border-left-” all the time.

超意訳

元のセレクタのネストを反映させるために、どのように出力がフォーマットされているのかに注意してください。
これはデフォルトのCSSの書き方ですが、他にもあらゆる種類のCSSの書き方があります。
可能な限りCSSを圧縮するための書き方でもあります！

プロパティもネスト可能なため、“border-left-”のような記述を繰り返してはいけません。

うーん、、なんで！が付いているのか意味不明ですが、
こういう書き方推奨みたいな意味なんでしょうかね。。
超意訳過ぎて分からん。。

サンプル

scssファイル

/* style.scss */

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

cssファイル (sassコマンドにより自動生成)

/* style.scss */
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; }

試しにhtmlファイルから生成されたcssファイルを読んでみる

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <title>index</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
    <div class = "fakeshadow">
        Hello, World!
    </div>
</body>
</html>

html表示結果

fakeshadowって言われてみればfakeshadowみたいな？？

＜ Sass Tutorial - 0: Ruby and Sass導入 on Windows | Sassの記事一覧 | Sass Tutorial - 2: Parent References ＞