Skip to content

Commit

Permalink
Merge pull request #3 from mazzo46/feature/hoge
Browse files Browse the repository at this point in the history
FAQを翻訳しました
  • Loading branch information
Layzie committed Jan 10, 2013
2 parents ab64cee + e46d1d1 commit 56f4a5c
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 0 deletions.
124 changes: 124 additions & 0 deletions docs/OutputStyle.md
@@ -0,0 +1,124 @@
+ 元文書: [sass/doc-src/SASS_REFERENCE.md at f2ff5d2d60a461f7b1ecfdb036c558ad6fa34fa2 · nex3/sass · GitHub](https://github.com/nex3/sass/blob/f2ff5d2d60a461f7b1ecfdb036c558ad6fa34fa2/doc-src/SASS_REFERENCE.md#output-style "sass/doc-src/SASS_REFERENCE.md at f2ff5d2d60a461f7b1ecfdb036c558ad6fa34fa2 · nex3/sass · GitHub")

## 出力形式 [原文](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style)

Although the default CSS style that Sass outputs is very nice
and reflects the structure of the document,
tastes and needs vary and so Sass supports several other styles.

Sass がデフォルトで出力する CSS の形式は非常に良くできていて、
文書構造を反映したものになっていますが、好みや必要性は様々ですので、
Sass ではいくつかの出力形式をサポートしています。

Sass allows you to choose between four different output styles
by setting the [`:style` option](#style-option)
or using the `--style` command-line flag.

Sass では、四つの出力形式を選べます。[`:style` オプション](#style-option)
または、コマンドライン引数で `--style` を使ってください。

### `:nested`

Nested style is the default Sass style,
because it reflects the structure of the CSS styles
and the HTML document they're styling.
Each property has its own line,
but the indentation isn't constant.
Each rule is indented based on how deeply it's nested.
For example:

ネスト形式(Nested style)は、Sass のデフォルト形式になっています。
というのも、この形式は CSS のスタイルや
HTML文書の構造を反映したものになっているからです。
どのプロパティも一行で表記されますが、インデントは一定ではありません。
どのルールも、どれだけネストされているかにしたがってインデントされます。
例えば:

#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }

Nested style is very useful when looking at large CSS files:
it allows you to easily grasp the structure of the file
without actually reading anything.

ネスト形式は、巨大な CSSファイルの中身を見るときに非常に役立ちます。
実際に読みこむことなく簡単にファイルの構造がつかめます。

### `:expanded`

Expanded is a more typical human-made CSS style,
with each property and rule taking up one line.
Properties are indented within the rules,
but the rules aren't indented in any special way.
For example:

展開形式(Expanded style)は、人間が書く典型的な CSS の形式に近いものです。
プロパティもルールも一行で表記されます。
プロパティはルール内でインデントされますが、
ルール自体はとくにインデントされません。
例えば:

#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}

### `:compact`

Compact style takes up less space than Nested or Expanded.
It also draws the focus more to the selectors than to their properties.
Each CSS rule takes up only one line,
with every property defined on that line.
Nested rules are placed next to each other with no newline,
while separate groups of rules have newlines between them.
For example:

コンパクト形式(Compact style)は、
ネスト形式や展開形式よりも少ない記述量で出力します。
プロパティよりもセレクタに着目しやすい形式でもあります。
どの CSSルールも一行になり、その一行の中にすべてのプロパティが定義されます。
ネストされたルールは、隣り合った行に空行を含まず配置されます。
一方で、別々のグループに属するルールは空行で分けられます。
例えば:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

### `:compressed`

Compressed style takes up the minimum amount of space possible,
having no whitespace except that necessary to separate selectors
and a newline at the end of the file.
It also includes some other minor compressions,
such as choosing the smallest representation for colors.
It's not meant to be human-readable.
For example:

圧縮形式(Compressed style)は、可能な限り、最小の記述量で出力します。
セレクタを分けたり、ファイルの最後に改行を含めるといった必要なもの以外は、
空白文字も含みません。
さらに、色の指定などを最小の記述に書き換えるといったちょっとした圧縮も行います。
人間が読むためのものではありません。
例えば:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

66 changes: 66 additions & 0 deletions docs/faq.md
@@ -0,0 +1,66 @@
+ 元文書: [sass/doc-src/FAQ.md at f2ff5d2d60a461f7b1ecfdb036c558ad6fa34fa2 · nex3/sass · GitHub](https://github.com/nex3/sass/blob/f2ff5d2d60a461f7b1ecfdb036c558ad6fa34fa2/doc-src/FAQ.md "sass/doc-src/FAQ.md at f2ff5d2d60a461f7b1ecfdb036c558ad6fa34fa2 · nex3/sass · GitHub")

# よくある質問 [原文](http://sass-lang.com/docs/yardoc/file.FAQ.html)

* 目次
{:toc}

## Can I use a variable from my controller in my Sass file?

## 自分のコントローラの変数を Sass ファイルで使えますか?

{#q-ruby-code}

No. Sass files aren't views.
They're compiled once into static CSS files,
then left along until they're changed and need to be compiled again.
Not only don't you want to be running a full request cycle
every time someone requests a stylesheet,
but it's not a great idea to put much logic in there anyway
due to how browsers handle them.

できません。Sass のファイルはビューではありません。
Sass のファイルは一度静的な CSS ファイルにコンパイルされ、変更されるまでそのままです。
また、変更があれば再度コンパイルされなければなりません。
誰かがスタイルシートをリクエストするたびに、この全工程を実行したくはないでしょうし、
ブラウザごとのスタイルシートの扱い方を考えれば、この部分にロジックを詰め込むのは
良いアイデアではありません。

If you really need some sort of dynamic CSS,
you can define your own {Sass::Script::Functions Sass functions} using Ruby
that can access the database or other configuration.
*Be aware when doing this that Sass files are by default only compiled once
and then served statically.*

もし、本当に動的な感じの CSS が必要なら、Ruby を使ってデータベースやその他の設定を参照するような
自作の {Sass::Script::Functions Sass関数} を作りましょう。
*これを行うとき、デフォルトでは Sass は一回しかコンパイルを行わず、以降は静的なままである
ということに注意してください。*

If you really, really need to compile Sass on each request,
first make sure you have adequate caching set up.
Then you can use {Sass::Engine} to render the code,
using the {file:SASS_REFERENCE.md#custom-option `:custom` option}
to pass in data that {Sass::Script::Functions::EvaluationContext#options can be accessed}
from your Sass functions.

本当に、本当に、リクエストのたびに Sass でコンパイルしたい場合ですが、まずキャッシュの設定を
十分に済ませていることを確認してください。
次に {Sass::Engine} で、コードを生成します。その際には、あなたの自作した Sass関数から
{Sass::Script::Functions::EvaluationContext#options アクセスできる}
データを受け取れるように
{file:SASS_REFERENCE.md#custom-option `:custom` オプション}を指定します。

# You still haven't answered my question!

# まだ質問に全部答えてもらってないんですけど?

Sorry! Try looking at the [Sass](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html) reference,
If you can't find an answer there,
feel free to ask in `#sass` on irc.freenode.net
or send an email to the [mailing list](http://groups.google.com/group/sass-lang).

ごめんなさい! [Sass](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html)
レファレンスを読んでみてください。
答えが見つからない場合は irc.freenode.net に `#sass` で気軽に質問してみてね。
[メーリングリスト](http://groups.google.com/group/sass-lang)にメールも送れます。

0 comments on commit 56f4a5c

Please sign in to comment.