From 67e74bded6329ca24ca32aa848bdb16b28c19d69 Mon Sep 17 00:00:00 2001 From: ryo4004 Date: Thu, 16 Jan 2020 13:28:29 +0900 Subject: [PATCH 1/5] Translate docs/sass --- docs/docs/sass.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/sass.md b/docs/docs/sass.md index f91f7131a..078fc2b90 100644 --- a/docs/docs/sass.md +++ b/docs/docs/sass.md @@ -1,30 +1,30 @@ --- -title: Using Sass in Gatsby +title: Gatsby で Sass を使用する --- -[Sass](https://sass-lang.com) is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin. +[Sass](https://sass-lang.com) は CSS にネストや変数、ミックスイン、セレクタの継承などを追加して拡張したものです。Gatsby では、プラグインを使用して Sass を適切な形式の CSS に変換できます。 -Sass will compile `.sass` and `.scss` files to `.css` files for you, so you can write your stylesheets with more advanced features. +Sass は `.sass` もしくは `.scss` ファイルを `.css` にコンパイルすることで、より高度な機能を備えたスタイルシートを作成できます。 -> **Note**: the difference between using a `.sass` or `.scss` file is the syntax that you write your styles in. All valid CSS is valid SCSS as well so it is the easiest to use and most popular. You can read more about the differences in the [Sass documentation](https://sass-lang.com/documentation/syntax). +> **メモ**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) を参照してください。 -## Installing and configuring Sass +## Sass のインストールと設定 -This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start/), then come back. +このガイドでは、Gatsby プロジェクトが準備されている必要があります。もしプロジェクトの準備が完了していない場合は、[**クイックスタートガイド**](/docs/quick-start/)を参照しましょう。 -1. Install the Gatsby plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/) and `node-sass`, a required peer dependency as of v2.0.0. +1. Gatsby プラグイン [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/) および v2.0.0 以降の `node-sass` をインストールします。 `npm install --save node-sass gatsby-plugin-sass` -2. Include the plugin in your `gatsby-config.js` file. +2. プラグインを `gatsby-config.js` ファイルに追記します。 ```javascript:title=gatsby-config.js plugins: [`gatsby-plugin-sass`], ``` -> **Note**: You can configure [additional plugin options](/packages/gatsby-plugin-sass/#other-options) like paths to include and options for `css-loader`. +> **メモ**: パスや `css-loader` のオプションなど、[追加のプラグインオプション](/packages/gatsby-plugin-sass/#other-options)を設定できます。 -3. Write your stylesheets as `.sass` or `.scss` files and require or import them as normal. +3. スタイルシートを `.sass` もしくは `.scss` ファイルに記述し、require もしくは import で取り込みます。 ```css:title=styles.scss $font-stack: Helvetica, sans-serif; @@ -50,7 +50,7 @@ import "./styles.scss" import "./styles.sass" ``` -## Other resources +## その他の参照文献 - [Introduction to Sass](https://designmodo.com/introduction-sass/) - [Sass documentation](https://sass-lang.com/documentation) From 8777c5fde108956f141e558148daf0cb9842132e Mon Sep 17 00:00:00 2001 From: ryo4004 Date: Thu, 16 Jan 2020 13:48:34 +0900 Subject: [PATCH 2/5] Update translate --- docs/docs/sass.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/sass.md b/docs/docs/sass.md index 078fc2b90..95b9e60ba 100644 --- a/docs/docs/sass.md +++ b/docs/docs/sass.md @@ -2,11 +2,11 @@ title: Gatsby で Sass を使用する --- -[Sass](https://sass-lang.com) は CSS にネストや変数、ミックスイン、セレクタの継承などを追加して拡張したものです。Gatsby では、プラグインを使用して Sass を適切な形式の CSS に変換できます。 +[Sass](https://sass-lang.com) は CSS にネストや変数、ミックスイン、セレクターの継承などを追加して拡張したものです。Gatsby では、プラグインを使用して Sass を適切な形式の CSS に変換できます。 Sass は `.sass` もしくは `.scss` ファイルを `.css` にコンパイルすることで、より高度な機能を備えたスタイルシートを作成できます。 -> **メモ**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) を参照してください。 +> **メモ**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) をご覧ください。 ## Sass のインストールと設定 From a1f69a471dac331a17f385884a91fec9ce5a3084 Mon Sep 17 00:00:00 2001 From: ryo4004 Date: Fri, 17 Jan 2020 08:40:41 +0900 Subject: [PATCH 3/5] Update translate --- docs/docs/sass.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/sass.md b/docs/docs/sass.md index 95b9e60ba..6c357da6d 100644 --- a/docs/docs/sass.md +++ b/docs/docs/sass.md @@ -6,7 +6,7 @@ title: Gatsby で Sass を使用する Sass は `.sass` もしくは `.scss` ファイルを `.css` にコンパイルすることで、より高度な機能を備えたスタイルシートを作成できます。 -> **メモ**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) をご覧ください。 +> **ヒント**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) をご覧ください。 ## Sass のインストールと設定 @@ -22,7 +22,7 @@ Sass は `.sass` もしくは `.scss` ファイルを `.css` にコンパイル plugins: [`gatsby-plugin-sass`], ``` -> **メモ**: パスや `css-loader` のオプションなど、[追加のプラグインオプション](/packages/gatsby-plugin-sass/#other-options)を設定できます。 +> **ヒント**: パスや `css-loader` のオプションなど、[追加のプラグインオプション](/packages/gatsby-plugin-sass/#other-options)を設定できます。 3. スタイルシートを `.sass` もしくは `.scss` ファイルに記述し、require もしくは import で取り込みます。 From 00016a02b2d10e859bac1691c411c36a0302367f Mon Sep 17 00:00:00 2001 From: ryo4004 Date: Sun, 19 Jan 2020 13:25:39 +0900 Subject: [PATCH 4/5] Update translate --- docs/docs/sass.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sass.md b/docs/docs/sass.md index 6c357da6d..15df7ca38 100644 --- a/docs/docs/sass.md +++ b/docs/docs/sass.md @@ -4,7 +4,7 @@ title: Gatsby で Sass を使用する [Sass](https://sass-lang.com) は CSS にネストや変数、ミックスイン、セレクターの継承などを追加して拡張したものです。Gatsby では、プラグインを使用して Sass を適切な形式の CSS に変換できます。 -Sass は `.sass` もしくは `.scss` ファイルを `.css` にコンパイルすることで、より高度な機能を備えたスタイルシートを作成できます。 +Sass はより高度な機能を使用したスタイルシートを `.sass` もしくは `.scss` ファイルに記述し、それらを `.css` ファイルにコンパイルできます。 > **ヒント**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) をご覧ください。 From 63e66037dd2ce01f5626119dfc9d99d15c8f30a1 Mon Sep 17 00:00:00 2001 From: ryo4004 Date: Sun, 19 Jan 2020 13:31:10 +0900 Subject: [PATCH 5/5] Update translate --- docs/docs/sass.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sass.md b/docs/docs/sass.md index 15df7ca38..6b891476c 100644 --- a/docs/docs/sass.md +++ b/docs/docs/sass.md @@ -4,7 +4,7 @@ title: Gatsby で Sass を使用する [Sass](https://sass-lang.com) は CSS にネストや変数、ミックスイン、セレクターの継承などを追加して拡張したものです。Gatsby では、プラグインを使用して Sass を適切な形式の CSS に変換できます。 -Sass はより高度な機能を使用したスタイルシートを `.sass` もしくは `.scss` ファイルに記述し、それらを `.css` ファイルにコンパイルできます。 +Sass はより高度な機能を使用したスタイルシートを `.sass` もしくは `.scss` ファイルに記述し、それらを `.css` ファイルにコンパイルします。 > **ヒント**: `.sass` と `.scss` ファイルはスタイルを記述する文法が異なります。全ての有効な CSS 記法は SCSS でも使用可能であるため、もっとも使いやすく人気があります。これらの違いについては、[Sass documentation](https://sass-lang.com/documentation/syntax) をご覧ください。