Hatena Blog Tags
はてなブログ トップ
Sass
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Sass

(ウェブ)
【さす】

Syntactically Awesome Stylesheets の略で、直訳すると「文法的にイケてるスタイルシート」。

通常の CSS にネスト記法や変数など便利な機能を組み込むことで、CSS をより管理しやすくする。

Sass のファイルはそのままではブラウザで読み込めないので、コンパイルしてブラウザが読み込める形式に変換して使う。

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
ソースコードを追いかけて•2年前

mixinでanimationの詳細を管理【sass記法】【CSS】【アウトプット】

/*動画学習アウトプットです*/ ご参考程度に楽しんでいただければと思います♪ https://www.udemy.com*Udemy講座より mixinの使い方について動画学習からメモです。 ☆Sassの機能mixinを使ってanimationの詳細を関数化 ◆mixin演算子 sassファイルの中で使える。【注！】CSSファイルでは使えない ［記法］ ☆定義 @mixin 呼び出すための名前(引数) { 内容} 例）@mixin animation() { } * 「animation」はmixinを呼び出すための名前・関数のように定義できる・引数にデフォルト値を設けることができる ☆mi…

#プログラミング学習#CSS#animation#Sass

ネットで話題

もっと見る
2969ブックマークTEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@functionThank you for your trust!You will be redirected to System.io page in 15 seconds.www.testcording.com
816ブックマークIntroduction to Sass and How to Setup with Mac + Codawww.webcreatorbox.com
535ブックマークBEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号blog.ruedap.com
475ブックマークCSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Web...dxd8.com
469ブックマークちゃんとCSSを書くために - CSS/Sass設計の話www.slideshare.net
468ブックマーク2時間でSassを習得！Sass初心者向け講習スライド大公開！ | WebNAUT by Beeworkswebnaut.jp
462ブックマークSass、そしてSassy CSS (SCSS)CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入...hail2u.net
461ブックマークより素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集www.webcreatorbox.com
451ブックマークSass: Syntactically Awesome Style SheetsSass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts m...sass-lang.com

関連ブログ

maru1783’s blog•2年前

sass　わからん

やればやるほど、わからん。 ひとつ？？になると、次も？？ 最終的には、何をやっているかわからなくなる・・・ みんなそうなのかな？ かじった程度の知識を持っていればわかるのかもしれないけど、 知識ゼロの私にとって、かなり難解。 { }が多すぎて、どこに向けての{ }なのかがわからない・・・ あるある？ 一人学習の欠点、相談者がいなーーーい！

#一からチャレンジ
のーとそーだこーど。•3年前

【初級編DAY23】CSS設計の基本概念からクラスの付け方をイメージしよう

一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね！ そのためにはどうしたら良いか？についてここでは学んでいきましょう。 CSS設計について OOCSSについて 「構造」と「見た目」の分離 「コンテナー」と「コンテンツ」の分離 Sassでの記述の注意 BEMについて【命名規則】 補足 参考サイト SMACSSについて Sassでの記述のポイント Sassについての復習 まとめ CSS設計について CSSには色々な書き方が有ります。それを効率的かつ管理しやすい形となるよう先人が体系化して共有してくれていたりします。それをCSS設計と呼んで…

#OOCSS#BEM#SMACSS#CSS#CSS設計#Sass
のーとそーだこーど。•3年前

【初級編DAY22】カフェLPのCSSをSassで書き直してみよう

Sassについて学んだところで、実際にコードを書いていくための準備をしましょう。 SassからCSSへコンパイルする Live Sass Compilerのインストール 設定画面記述文 Sassの出力方法の設定 拡張子 出力先フォルダ Autoprefixerによるベンダープレフィックスの設定 除外するファイルの設定 ソースマップの無効化 フォルダの構成 ファイル分割の方法（@useの使い方） 基本記述 @importについて 別ファイル内のmixin、変数を使う場合 SassからCSSへコンパイルする ■コンパイルとは■ Sassそのままだとブラウザで読み込めない。Sassで書いた内容をCS…

#Sass#Live Sass Compiler#コンパイル#@use
のーとそーだこーど。•3年前

【初級編DAY21】CSSの上位互換！Sassを学習しよう

SassのSCSS文法について学んでいきます。 Sassとは？ 入れ子の書き方 ＆でつなげる擬似要素・クラスの書き方 変数を使ってみよう 変数をつかった四則演算 定義したスタイルを使いまわそう @extendの使い方 @mixinの使い方 @extendと@mixinの違い @mixinを使ったメディアクエリの設定方法 解説（Sass） 【まとめ】Sassのメリット Sassとは？ ■Sassとは■ CSSを拡張して扱いやすくしたスタイルシートのこと。Syntactically Awesome StyleSheetの略（直訳：文法的に素晴らしいスタイルシート）。CSSで記述するよりも圧倒的に早…

#Sass#@extend
親バカエンジニアのナレッジ帳•3年前

node.jsのバージョンアップによりNode Sassエラーの発生

エラーの発生契機 解消方法1 解消方法2 エラーの発生契機 エラーの種類は以下 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (108)node.jsのバージョンアップで発生するエラーになると思います。 私の場合はnode.jsを2023年7月時点の最新である18.7.0にバージョンアップした時に発生しました。 解消方法1 とりあえずNode Sassのバージョンが合っていないようなので、node-sassとsass-loaderのバージョ…

#node-sass#sass-loader#Node#Sass
enGrdiary（エンジニア成長日記）•3年前

コンパイル　とは

コンパイル とは？ 今まで「コンパイル」って聞かれたら、「機械語に訳す」っていう認識だった。 でも、sass から css にコンパイルするって聞いて、悩んだ。 調べると、「とあるプログラミング言語で書かれた記述を別の言語に変換すること」らしい。 つまり、sass で書いたものを、css 形式に変換することだと。 今回のsass から css のような同じレベル間のコンパイルは、 「トランスパイラ」や「クロスコンパイラー」と呼ぶそう。 でも、この(sass をcssにコンパイルする)必要性ってあるのかな？ 以下の sass の公式ドキュメントの文章によると、ざっくり要約すると、sass は c…

#コンパイル
日々ブログ•3年前

【プログラミング】Sassの入門ツールとしてpreprosが使いやすかった

HTML/CSSとは 複数の画面を作るにはsassが必須 画面部品ごとに適用できるとよい インストール方法 公式サイトからダウンロード 言われるがままインストール さっそく使ってみる ローカルサーバーを自動で立ち上げてくれる 面倒な設定を気にしなくて良いのが素敵 ライセンス購入メッセージがやかましい 大規模な画面を作るなら自力で環境構築した方がいい 所感 最近、HTML/CSSのコーディングをする必要があったので、環境構築方法を調べたところpreprosが使いやすかったので、その使い方をまとめたいと思います。 HTML/CSSとは html/cssはwebページの画面構成と画面の見た目を記述す…

#prepros#効率化