一覧に戻る « 前 次 » 第4章 高度な機能を覚えてSassを使いこなそう 4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin） ミックスインの基本
一覧に戻る « 前 次 » 第4章 高度な機能を覚えてSassを使いこなそう 4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin） ミックスインの基本
そもそもSassとは？ CSSを効率的に書けるように、CSSの機能を拡張した言語です。 Sassを使うメリットは CSSを簡単に書ける CSSの中で変数を使ったり、計算を行うことができる などがあります。 そんな便利なメリットを持つSassですが、特に大きなメリットとして、 複数のCSSファイルをまとめられる ことが挙げられます。 Sassで複数のファイルをまとめる手順 ① ファイルの中でまとめる部分を決める。 ある一定の内容ごとにまとめられるところがないかを探します。 例)メニューバー、メインコンテンツ、送信フォーム... また、一定の機能でまとめることもできます。 例)Sassで定義した変数、リセットCSS... このように分割することで、コードが読みやすくなり、 後々コードに修正を加える時も、どこを見ればいいかわかりやすくなります。 特に複数人で開発する時はこういった風に、コードを分
Atomでコーディングをしていてｓｃｓｓのコンパイルが必要になり、簡単にコンパイルをしてくれるパッケージ「sass-autocompile」を利用したので導入と基本的な使い方までを紹介します！ sass-autocompileとは sass-autocompileは、sassとscssファイルをコンパイルしてくれるパッケージです。パッケージ設定でファイルの保存をしたら自動でコンパイルしてくれたり、.minファイルでコンパイルしてくれたりする便利機能を利用することができます。 インストール前に必要なもの sass-autocompileを利用するには、事前にnode.jsとnode-sassをPC自体にインストールする必要があります。 node.jsとは JavaScriptはブラウザサイドで動作するのに対して、node.jsはサーバーサイドで動作するJavaScriptで、メモリ消費が少な
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
Sassってなんだろう。 ・Sass「Syntactically Awesome StyleSheet」 Syntactically ＝ 構文的に Awesome ＝ イケてる StyleSheet ＝ スタイルシート とどのつまり、すごいCSSということでしょうか。ロゴもかっこいい。 詳しく調べてみた ・CSSを拡張したメタ言語 メタ言語とは「ある言語について何らかの記述をするための言語」のこと。 つまりSassの場合は「CSSに対して機能を拡張した言語」ということになります。 CSSをより効率的に書けるようにした言語ということになります。 ・Sass はプログラムっぽく CSS を書く プログラムっぽく書くことでコーディング効率やソースコードの保守性が上がる。 Sassは、関数や変数の処理を行うために「プリプロセッサー」と呼ばれたりもするみたいです。 Sassには書き方が2種類ある！
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
最後はオプションで上から、サイズ変更、inputやbuttonなどのフォーム要素、ラッパー付きのボタン Buttonsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル Buttons.zipをButtons- GitHubからダウンロードし、外部ファイルとして記述します。 <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/button.css"> Step 2: HTML あとは、HTMLにボタンのスタイルを使うだけで実装できます。 デモのHTMLは、こんな感じです。 <a href="#" class="button button-rounded button-flat-primary">press me</a> <a href="#" clas
2012年 10月 31日 コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
