Sass(SCSS)のややこしそうな機能まとめ。 変数 共通な色や数値などを定義しておける。 他に、文字列や真偽なども定義可能。
Sass(SCSS)のややこしそうな機能まとめ。 変数 共通な色や数値などを定義しておける。 他に、文字列や真偽なども定義可能。
こんにちは。 新卒デザイナーのshikaです。 入社から早くも3か月が経ちました。仕事をする上で「高いクオリティ」と「限られた時間」との両立がどれほど大変かということを、強く実感しています。学生の時は時間に余裕もあり、ポートフォリオを作る時も自由に時間を使えました。Webページの制作にもCSSを生のまま書いていたのですが、コーディング作業の効率化をしようと思い、以前から気になっていたSassに手を出してみました。 その結果、ある程度使えるようになったので、Sassの導入方法や初歩的な部分を解説してみようと思います。 Sassって? Sassとは、「Syntactically Awesome StyleSheet」の略です。直訳すると構文的に、凄い、スタイルシート…? とりあえず、いろいろ便利になったCSSというイメージで大丈夫だと思います! Sassは2種類の構文で構成されたスクリプト言語
GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。 sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。 - CSSのメタ言語Sass(SCSS)、LESSの完全入門 また、Compassというものも出てきたりします。 - CSSの常識が変わる!「Compass」の基礎から応用まで! またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。 - gulp インストール~基本設定の備忘録(windows) ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがい
var path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ context: path.join(__dirname, 'src/css'), entry: { style: './style.scss' }, output: { path: path.join(__dirname, 'public/css'), filename: '[name].css' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&minimize&sourceMap!sass-loader'
Sass は Less, Stylus, Tass, PCSS などと同様の CSS を拡張したメタ言語のひとつです。 Sass は Syntactically Awesome Stylesheets (構文的にイケてるスタイルシート) の略です。「サス」と読みます。 Haml の設計者でもある Hampton Catlin が設計し、Nathan Weizenbaum が開発しました。 CSS に対して変数、ネスティング、Mixins、インラインインポートなどの機能を強化します。 色や値を操作するための多くの関数が用意されています。 if文や for文などの制御構文をサポートします。 Sass構文や SCSS構文で記述したファイルをコンパイラで CSS構文に変換して使用します。 ファイルサイズ圧縮のため、minify(compress)されたファイルを出力することが可能です。 Less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く