(Google+)562562件のシェア(そこそこ話題の記事)この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。はじめに早速ですがみなさん、黒い画面(コンソールやターミナル)はお好きですか?ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。(今では好きですよ、黒い画面)今回は、すぐに使えるSCSS入門|基礎編ということで、「黒い画面など見たくない!」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。Mixin(自作)」からの引用をぺたり。SCSS(Sass)はCSSをもう一度楽しくするCSSにコンパイルするためのメタ言語です。SCSSにはネストされたルール、変数、ミックスイン、セレクタ継承などCSSにあるととっても便利な拡張を使うことができるようになります。その他にもif,for,each,whileなども使えるようになります。CSS)とSass(インデント構文)に別れます。SCSSは.scssという拡張子、Sassは.sassという拡張子を持ち、お互いにSass-convertコマンドラインツールを使うことで変換もできますし、どちらの構文で書かれたとしてもインポートできます。ちなみに私はよりCSSの記述に近いSCSSを利用しています。Sass.sassと.scssの違いについて全体の流れ今回の大まかな流れです。順を追って説明していきます。自動処理の起動SCSSの編集作業SCSSの主な4つの機能GUI操作が可能なScout.appのインストール1,ダウンロードまずは、Scoutのページから最新版のScout.appをダウンロードします。0.7.1が最新版です。AIRでできているのでAIRが必要になりますが、無ければScoutのインストール時に自動インストールされるので気にしなくて大丈夫です。セキュリティ情報を許可してインストールを完了させます。インストール時のセキュリティは自己責任でお願いいたします!完了すると以下の画面が立ち上がります。プロジェクトが作られていますが、初回インストールであればプロジェクトは表示されません。64bitの場合(注意)64bitの場合、アプリケーションのコアファイルを修正する必要があります。難しいものではありません。テキストエディタを管理者権限で起動します。「アイコンを右クリック」や「プログラムやファイルの検索を行って該当プログラムを右クリック」してエディタを起動します。エディタを起動したら、Scoutがインストールされているディレクトリにある「process_interaction.js」というファイルを開きます。ドラッグアンドドロップでは管理者として編集できない場合があるので必ずメニューの「ファイル」→「開く」からファイルを開いてください。開くを押した際に、一覧に出てこない場合はファイルの種類をすべてのファイルかJavaScriptファイルになるよう変更しましょう。Java.exeのパスを書き換える開いたファイルの106行目から119行目にかけてJava.exeの場所に関する記述があります。(x86)」を追記します。本当はJavaのバージョンを調べて適切にパスを設定するべきですが今回は動くことを優先します。}編集が完了したら、間違いが無いか確認して保存しましょう。Scoutプロジェクトの定義プロジェクトの作成Scout.appを開いて左下のプロジェクト追加ボタンを押下します。プロジェクトフォルダの選択画面が開くので、新規に作成するか、すでにあるデータのルートフォルダを選択しましょう。プロジェクトが作成されました。今回はサンプルとして、以下のような構成のプロジェクトを作成しました。サンプルプロジェクトのファイルを用意したので必要な場合はダウンロードして利用してください。Folder」のみ指定を行います。画像の赤線部分で選択を行います。これでScoutの設定は完了です。プロジェクトの自動処理ボタンを押して編集を始めましょう。アウトプットファイルがない場合初回起動時に生成されます。基本的なSCSSの書き方SCSSは「.scss」という拡張子で保存し、書き方はCSSと変わりません。変数、ネストされたルール、ミックスイン、セレクタ継承、がSCSSの代表的な機能になります。それでは、1つ1つサンプルを作りながら説明していきます。変数とは、箱に情報を保存し後で取り出すことができます。CSS内で頻繁に利用するサイズや色の指定を変数で管理することで、変更の手間を大きく減らすことができます。変数の値は演算が可能でサイズだけでなく、色の16進数なども計算させることができます。#footerの横幅を960pxに合わせる指定を行います。</footer></body></html>SCSS変数は「$」を使って定義します。サンプルでは大文字で書いていますがもちろん小文字も利用できます。大文字にしているのは定数のように使いたい時にわかりやすくするためです。CSS生成されたCSSにしっかりと値が入っていますね。#222222;}上記のサンプルをもとに編集して保存してみてください。Scoutのlog画面も確認してみましょう。上書き保存されていれば以下のような画面になります。エラーが表示されてしまったら、エラー箇所についてlogが残ります。修正を行って再度保存しましょう。4つの主な機能2:宣言ブロックのネストCSSでは宣言ブロックをネストすることができません。セレクタをいくつもいくつも指定しなければいけません。SCSSを使えば宣言ブロックのネストが可能になります。セレクタをネストしすぎるとパフォーマンスに影響するので気をつけましょう。</header></body></html>SCSSIDのネストは意味が無いので本来はやらない方が良いです。サンプルとして見てください。CSSしっかりネストした通りにセレクタが宣言されていますね。100%;}4つの主な機能3:Mixins(関数)MixinsはJavaScriptの関数に似たものです。これを使いこなせるようになるとSCSSを使うのがだいぶ楽しくなります。あんなことやあんなところに使えそうなどなど夢が膨らみますね。HTMLこのHTMLは変数のサンプルに利用したHTMLと同じソースコードです。#footerに対して中央寄せのCSSを指定していきます。0)がMixinsの指定になります。引数が2つ定義されており、デフォルト値の0が指定されています。960px;}4つの主な機能4:セレクタ継承セレクタ継承はCSSでもHTMLにクラスを指定することで継承と似たように振る舞うことができます。blue">B</li></ul>SCSSの場合、もっと簡単に他の宣言ブロックを継承することができます。SCSSの場合を見てみます。HTMLCSSの複数クラス指定を使わずHTMLをクリーンな状態で継承することができます。.list;の部分で対象となるクラスを継承します。生成されるCSSの記述量は増えますが、HTMLには影響を与えないため、CSSだけで多くを制御できるようになります。CSSでよく使われるclearfixもこの継承を使うことでHTMLにclearfixを書きまくらなくて済むようになります。CSSそれほど難しい指定ではなかったですが、書いてみると意外と面倒なCSSですね。90%;}SCSSの継承とCSSの複数指定はどちらか一方が優れているというものではないので、必要に応じて使い分けましょう。以上、SCSSの基本となる4つの機能でした。まとめいかがだったでしょうか?CSSからSCSSに乗り換えてみると便利さに驚きます。次回はSCSSを更に便利にするcompassについて紹介しつつSCSSのファイル分割と@importについて触れたいと思います。compassでもう普通のCSSには戻れませんね。1,575,092クラスメソッドのWebサイト全般の運用・制作を担当しています。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。濱田孝治371re:Invnetの動画検索でもめちゃくちゃ便利ですが、その他ブログやホワイトペーパーやGitHubも横断検索できるので、是非一度使ってみてください。CAFEの他、NTTデータとセブンイレブンの取り組みや、サインポスト、Zippinなどの各社と流通・小売業との連携を業界マップに作成してみました。PolicyのConditionにaws:CalledViaというキーが追加されました。いったキーなのかご説明します。夏目祐樹410こんにちは、CX事業本部の夏目です。MacのタッチバーのタッチIDが非常に便利なのですが、Terminalでsudoを叩かないと行けないときに使えたらなぁと思ったので、情報を共有します。濱田孝治371re:Invnetの動画検索でもめちゃくちゃ便利ですが、その他ブログやホワイトペーパーやGitHubも横断検索できるので、是非一度使ってみてください。臼田佳祐296ワークフロー自動化OSSのn8nをAWS環境で建てて検証してみました。非常に期待できるサービスです。Fargateの勉強をしています。使ってみたい方は参考にしてください。洋介256SnowflakeがAWSの東京リージョン上で稼働するようになりました。データを日本に置けます。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。