Sublime TextでSassをコンパイルしてみる - Qiita
概要 若手HTMLコーダーがSassのコンパイル環境の構築に苦戦しているようだったので、少し調べてみる。コンソールに不慣れだろうから、Sublime Text上でコンパイルできる環境を構築する。 Sublime Textを選択した理由は、昔動画をみて惚れたが、私の日常では活躍の場が少なかったため。普段はIntelliJで開発してますし。。 環境 MacOS Sierra ※Windowsの場合は、rubyのインストールから必要です。 やること sassとcompassをインストール Sublime Textをインストール Sublime Package Controlをインストール Sass関連のプラグインをインストール Sassをコンパイル sassとcompassをインストール ターミナルを立ち上げ、以下のコマンドを順番に入力してください。 途中パスワードを聞かれるので、PCのログイン
gulpで自動化できるWebコーディング作業を先に知っておく
Web制作の現場では、技術の存在を知らないことで非効率な作業を続けてしまうことが少なくない。ただ、新しい技術を習得するのは時間もかかるので、習得コストとメリットを天秤にかけることだろう。 僕が習得して良かったと感じている技術の1つに「gulp.jp（ガルプ）」という自動化ツールがある。 ここでは、Webデザイナー目線でこのgulpの概要とメリットを伝えたい。「そういうことに使えるなら覚えておいた方がいいか」と重い腰をあげてほしい。 gulp.js gulpの概要gulpは、作業の自動化と強化を行うツール。例えば、コードの結合・コードのMinify・スプライト画像の作成・画像の圧縮など、面倒だけどやったほうがいい作業を自動化できる。Node.jsで動くので、事前にNode.jsをMac/PCへインストールしておく必要がある。 使う際には、制作するプロジェクトのディレクトリに npm でgul
Sass（SCSS）でCSSコーディングを効率化・メリットと使い方を知る
同じようなCSSを繰り返し書いて嫌になったことはないだろうか。サイトで使っている色が煩雑になってしまったことは。僕も、散々不毛なCSSを書いていたけれど「Sass」を覚えてかなり楽になった。 Sass: Syntactically Awesome Style Sheets SassとはSass（サス）は、CSSを効率的に書くことができるメタ言語（CSSプリプロセッサ）。語源は「書き方 （Syntactically）がイケてる（Awesome）スタイルシート（Style Sheets）」の略らしい。 書き方は2種類ある。Rubyのようにインデントのみで書いていく「Sass」スタイルと、CSSと同じようなカッコでくくる「SCSS」記法。主流なのはSCSSで、普通のCSSもそのままコピペで使える。 ファイルの拡張子もそれぞれ .sass .scss となっている。 Sassスタイル：インデント型
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
CSSを超効率化する！SASSの基本と導入方法まとめ
更新日: 2017年5月22日公開日: 2016年8月29日CSSを超効率化する！SASSの基本と導入方法まとめ 本稿ではCSSをもっと便利に使うためのツールである、SASSについて解説します。SASSの基本から導入方法、学習の参考になるサイトまでをまとめています。 SASSでCSSがもっと便利になる！SASSとは？ SASS（Syntactically Awesome Style Sheets）とは、CSSを拡張したメタ言語（プリプロセッサー）のことです。CSSを使った開発を便利にできるので、Web系のエンジニアであればぜひともマスターしておきたい言語の一つです。 SASSには2種類の記述方法があります。SASS文法と、それを書きやすくしたSCSS文法（Sassy CSS）の2つです。SASS文法を使う時は拡張子を「.sass」に、SCSS文法の時は「.scss」にします。どちらの場合も
これからはcssはSassで書こう。 - Qiita
Sassってなんだろう。 ・Sass「Syntactically Awesome StyleSheet」 Syntactically ＝ 構文的に Awesome ＝ イケてる StyleSheet ＝ スタイルシート とどのつまり、すごいCSSということでしょうか。ロゴもかっこいい。 詳しく調べてみた ・CSSを拡張したメタ言語 メタ言語とは「ある言語について何らかの記述をするための言語」のこと。 つまりSassの場合は「CSSに対して機能を拡張した言語」ということになります。 CSSをより効率的に書けるようにした言語ということになります。 ・Sass はプログラムっぽく CSS を書く プログラムっぽく書くことでコーディング効率やソースコードの保守性が上がる。 Sassは、関数や変数の処理を行うために「プリプロセッサー」と呼ばれたりもするみたいです。 Sassには書き方が2種類ある！
[CSS]Sassの@mixinとは？使い方もサクッと紹介
mixinとは別で定義したスタイルを@includeでなんども呼び出せるというものです。関数的な使い方ができるので便利です。 例えばよく使うスタイルを@mixinで定義しておけば、どこからでも@includeで呼び出せるのでコードがすっきり、メンテナンス性も高まります。 @mixinをさっそく使う 先ほども少し紹介しましたが、@mixinで定義して@includeで再利用する。 ここでは@mixinでボックスの縦横の長さを定義しています。 その後に@includeで呼び出し、色は別で赤をスタイルしました。簡単ですね。 @mixinで引数を使う さらに掘り下げて。@mixinで引数を使用することができます。ほんと関数に似ていますね。 引数を使う場合は@include(引数の値)と記述します。 複数の引数を使用する 引数は一つだけではなく、複数の引数も使用できます。
![[CSS]Sassの@mixinとは？使い方もサクッと紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/d8e6fdd1519d4a3531b5606b9e90142cb9da19a1/height=288;version=1;width=512/https%3A%2F%2Fcode-schools.com%2Fwp-content%2Fuploads%2F2020%2F07%2Fcss.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Easy Sass - Visual Studio Marketplace
Your Friendly Web Development Companion