今回は変数についてです。 $ から始めて、値はCSSと同じようにして設定します。 こんな感じ。 Scss $margin: 2em 0; // $margin に "2em 0" をいれて定義する。 h1 { margin: $margin; }
scssに関するnabinnoのブックマーク (24)
-
nabinno 2017/11/07
-
-
-
-
-
Sass Pathways
Sass’s killer feature was truly the @import statement. When a Sass file is imported, all the variables and mixins defined previously are now available in any subsequent imported file. So, it is very good practice to define a single top-level stylesheet that you link to from the <HEAD> of your page layout. In a Rails implementation, this would likely be the application.scss. This root file is then
-
You Don't Need JavaScript for That!
I often use a few CSS alternatives to common JavaScript interactions when I’m developing the front-end of a website (especially a prototype). There are some projects where downloading a plugin or creating a new file for a few lines of code seems like overkill. Here are some components I use created by using only CSS: Tooltips Tooltips are great for showing helpful information that isn’t necessary
-
-
-
-
-
-
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
-
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
-
-
-
Sass Vs. Less | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! “Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one
-
Emacsの『scss-mode』 - 牌語備忘録 -pygo
https://github.com/antonj/scss-mode Sass、そしてSassy CSS (SCSS) scss-modeでインデントが効かない場合 前回、試した時は上手く行かなかったのだけど、原因判明。 結論からいうと、Emacs-lispのパスの通ったところにデフォルトのcss-modeではない『css-mode.el』ファイルが置いてあった。 init.elで設定をしなくても、これを読み込んでしまうのが原因。 ケアレスミス。 EmacsのCSS-MODE Lars version 数年前はEmacsでCSSというと、このcss-mode.elがよく使われてた。 A CSS editing mode for Emacs (Author: Lars Marius Garshol) デフォルトのcss-mode いつの間にかEmacsの数バージョン前から、別のcss-mo
-
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました