From 450cf0dc661326a22edeb5b8da9a70fd32a355b5 Mon Sep 17 00:00:00 2001 From: t32k Date: Mon, 4 Mar 2013 22:28:35 +0900 Subject: [PATCH 1/3] Add --- docs/INDENTED_SYNTAX.md | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/INDENTED_SYNTAX.md b/docs/INDENTED_SYNTAX.md index 43ac63b..d31c4e9 100644 --- a/docs/INDENTED_SYNTAX.md +++ b/docs/INDENTED_SYNTAX.md @@ -21,9 +21,7 @@ and instead of using semicolons to separate statements it uses newlines. This usually leads to substantially less text when saying the same thing. -Sassのインデント構文（単に”Sass”として知られる）は、より簡潔に書けるように設計され、 - - +Sassのインデント構文（単に”Sass”として知られる）は、CSSベースのSCSS構文に代わるものとして、より簡潔に、より美しく記述できるように設計されています。ただ、CSSとの互換性はありません。スタイルブロックを区切るために`{`と`}` を使用する代わりに、インデントを使用し、プロパティはセミコロンで区切る代わりに改行を使用します。これにより冗長な表現を避けることができ、確実にタイプする文字数を減らすことができます。 Each statement in Sass, such as property declarations and selectors, must be placed on its own line. @@ -31,18 +29,23 @@ In addition, everything that would be within `{` and `}` after a statement must be on a new line and indented one level deeper than that statement. For example, this CSS: +プロパティ宣言やセレクタのようなSassにおける各ステートメントは、一行ごとに記述しなければなりません。さらに`{`と`}`内のステートメントは改行しインデントを一つ深くしなければなりません。 +例えばこのCSSは、 + #main { color: blue; font-size: 0.3em; } would be this Sass: +Sassだとこのようになる。 #main color: blue font-size: 0.3em Similarly, this SCSS: +同様にこのCSSは、 #main { color: blue; @@ -60,6 +63,7 @@ Similarly, this SCSS: } would be this Sass: +Sassだとこのようになる。 #main color: blue @@ -74,6 +78,8 @@ would be this Sass: ## Sass Syntax Differences +## Sass構文の違い + In general, most CSS and SCSS syntax works straightforwardly in Sass by using newlines instead of semicolons @@ -81,13 +87,20 @@ and indentation instead of braces. However, there are some cases where there are differences or subtleties, which are detailed below. +一般的に、セミコロンの代わりに改行、ブレスの代わりにインデントを使用すれば、ほとんどのCSSとSCSSはSass構文上でも問題なく機能します。しかし、いくつかのケースにおいて差異や微妙な点がいくつかありますので、それは後述します。 + ## Property Synax +## プロパティ構文 + The indented syntax supports two ways of declaring CSS properties. The first is just like CSS, except without the semicolon. The second, however, places the colon *before* the property name. For example: +インデント構文は2種類のプロパティ宣言に対応しています。最初のひとつはCSSとセミコロンを除いて全く同じです。もうひとつはコロンを使用しますが、それはプロパティ名の前に記述する方法です。 +例： + #main :color blue :font-size 0.3em @@ -96,6 +109,8 @@ By default, both ways may be used. However, the {file:SASS_REFERENCE.md#property_syntax-option `:property_syntax` option} may be used to specify that only one property syntax is allowed. +デフォルトで両方とも使用出来ます。 + ### Multiline Selectors Normally in the indented syntax, a single selector must take up a single line. From ddc7de66660651400771e23205864a8dc4098d97 Mon Sep 17 00:00:00 2001 From: t32k Date: Tue, 5 Mar 2013 10:29:30 +0900 Subject: [PATCH 2/3] Add 'Property Synax', 'Multiline Selectors' --- docs/INDENTED_SYNTAX.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/INDENTED_SYNTAX.md b/docs/INDENTED_SYNTAX.md index d31c4e9..da5021d 100644 --- a/docs/INDENTED_SYNTAX.md +++ b/docs/INDENTED_SYNTAX.md @@ -109,15 +109,20 @@ By default, both ways may be used. However, the {file:SASS_REFERENCE.md#property_syntax-option `:property_syntax` option} may be used to specify that only one property syntax is allowed. -デフォルトで両方とも使用出来ます。 +デフォルトで両方とも使用出来ますが、{file:SASS_REFERENCE.md#property_syntax-option `:property_syntax`オプション}はどちらかひとつのプロパティ構文しか指定できません。 ### Multiline Selectors +### 複数行セレクタ + Normally in the indented syntax, a single selector must take up a single line. There is one exception, however: selectors can contain newlines as long as they only appear after commas. For example: +インデント構文では通常ひとつのセレクタはひとつの行で記述されますが、例外があります。コンマを記述すれば改行することができ複数のセレクタを記述することができます。 +例： + .users #userTab, .posts #postTab width: 100px @@ -125,6 +130,8 @@ For example: ### Comments +### コメント + Like everything else in the indented syntax, comments are line-based. This means that they don't work the same way as in SCSS. From 29d6908848a385b2a8d4637c80d9bb4012a2df5c Mon Sep 17 00:00:00 2001 From: t32k Date: Wed, 6 Mar 2013 20:41:01 +0900 Subject: [PATCH 3/3] Add remaining docs. --- docs/INDENTED_SYNTAX.md | 70 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) diff --git a/docs/INDENTED_SYNTAX.md b/docs/INDENTED_SYNTAX.md index da5021d..52ceb9f 100644 --- a/docs/INDENTED_SYNTAX.md +++ b/docs/INDENTED_SYNTAX.md @@ -21,7 +21,7 @@ and instead of using semicolons to separate statements it uses newlines. This usually leads to substantially less text when saying the same thing. -Sassのインデント構文（単に”Sass”として知られる）は、CSSベースのSCSS構文に代わるものとして、より簡潔に、より美しく記述できるように設計されています。ただ、CSSとの互換性はありません。スタイルブロックを区切るために`{`と`}` を使用する代わりに、インデントを使用し、プロパティはセミコロンで区切る代わりに改行を使用します。これにより冗長な表現を避けることができ、確実にタイプする文字数を減らすことができます。 +Sassのインデント構文（単に”Sass”として知られる）は、CSSベースのSCSS構文に代わるものとして、より簡潔に、より美しく記述できるように設計されています。ただ、CSSとの互換性はありません。スタイルブロックを区切るために`{`と`}` を使用する代わりに、インデントを使用し、プロパティはセミコロンで区切る代わりに改行を使用します。これにより冗長な表現を避けることができ、確実に文字量を減らすことができます。 Each statement in Sass, such as property declarations and selectors, must be placed on its own line. @@ -138,12 +138,17 @@ This means that they don't work the same way as in SCSS. They must take up an entire line, and they also encompass all text nested beneath them. +インデント構文のすべての文法同様にコメントもまた行単位です。これはSCCS構文上では同じように機能しないことを意味しています。インデント構文のコメントは行全体を必要とし、インデントされたすべてのテキストを含みます。 + Like SCSS, the indented syntax supports two kinds of comments. Comments beginning with `/*` are preserved in the CSS output, although unlike SCSS they don't require a closing `*/`. Comments beginning with `//` are removed entirely. For example: +SCSS構文同様に、インデント構文もまた2種類のコメントをサポートしています。`/*`で始まるコメントはコンパイルされたCSS上でも出力されますが、SCCSと違うのは`*/`を必要としないことです。`//`で始まるコメントはコンパイルされると完全に削除されます。 +例： + /* This comment will appear in the CSS output. This is nested beneath the comment, so it's part of it @@ -156,7 +161,21 @@ For example: a color: green + /* このコメントはコンパイルされたCSS上に出力されます。 + この行はインデントされているので、 + コメントの一部です。 + body + color: black + + // このコメントはコンパイルされたCSS上に出力されません。 + この行もまたインデントされているので、 + 出力されません。 + a + color: green + + is compiled to: +このようにコンパイルされます。 /* This comment will appear in the CSS output. * This is nested beneath the comment, @@ -167,26 +186,46 @@ is compiled to: a { color: green; } + /* このコメントはコンパイルされたCSS上に出力されます。 + * この行はインデントされているので、 + * コメントの一部です。 */ + body { + color: black; } + + a { + color: green; } + ### `@import` The `@import` directive in Sass does not require quotes, although they may be used. For example, this SCSS: +Sass構文の`@import`ディレクティブは引用符を必要としませんが、使用しても構いません。 +SCSSの例： + @import "themes/dark"; @import "font.sass"; would be this Sass: +Sassだとこのように書きます。 @import themes/dark @import font.sass ### Mixin Directives +### ミックスインディレクティブ + Sass supports shorthands for the `@mixin` and `@include` directives. Instead of writing `@mixin`, you can use the character `=`; instead of writing `@include`, you can use the character `+`. For example: +Sass構文は`@mixin`と`@include`ディレクティブのショートハンドをサポートしています。 +`@mixin`と記述するかわりに、`=`と記述することができます。 +`@include`と記述するかわりに、`+`と記述することができます。 +例： + =large-text font: family: Arial @@ -198,6 +237,7 @@ For example: +large-text is the same as: +以下と同じ意味です。 @mixin large-text font: @@ -211,33 +251,61 @@ is the same as: ## Deprecated Syntax +## 廃止予定の構文 + Since the indented syntax has been around for a while, previous versions have made some syntactic decisions that have since been changed. Some of the old syntax still works, though, so it's documented here. +インデント構文が作られてから月日が流れているので、文法の変更を伴う旧バージョンが存在します。その古い文法は今なお機能しています。ドキュメントをこちらです。 + **Note that this syntax is not recommended for use in new Sass files**. It will print a warning if it's used, and it will be removed in a future version. +**新しくSassファイルを作成する際に、これらの構文は非推奨です。** もし使用すればWarningが出力されるようになっていますし、新バージョンでは削除される可能性があります。 + ### `=` for Properties and Variables +### プロパティと変数のための`=` + `=` used to be used instead of `:` when setting variables and when setting properties to SassScript values. It has slightly different semantics than `:`; see {file:SASS_CHANGELOG.md#3-0-0-sass-script-context this changelog entry} for details. +変数を定義するとき、またはSassScriptの値にプロパティを定義するとき、`:`ではなく`=`が使用されていました。これは`:`を使用するよりも意味的に合っていませんし、詳細は{file:SASS_CHANGELOG.md#3-0-0-sass-script-context 変更ログ}を参照してください。 + ### `||=` for Default Variables +### デフォルトの変数のための`||=` + `||=` used to be used instead of `:` when setting the default value of a variable. The `!default` flag was not used. The variable value has the same semantics as `=`; see {file:SASS_CHANGELOG.md#3-0-0-sass-script-context this changelog entry} for details. +変数のデフォルト値を定義するときに、`:`ではなく`||=`が使用されていました。また、`!default`フラグは使用されていませんでした。変数の値は`=`と同じ意味を持っています。詳細は{file:SASS_CHANGELOG.md#3-0-0-sass-script-context 変更ログ}を参照してください。 + ### `!` Prefix for Variables +### 変数のための接頭辞`!` + `!` used to be used as the variable prefix instead of `$`. This had no difference in functionality; it was a purely aesthetic change. + +`!`は`$`の代わりに変数の接頭辞として使用されていました。これによる機能的差異は生じません。ただ純粋に美的な変更です。 + + + + + + + + + +