Sass cheatsheet
Basics Introduction This is a quick reference to Sass stylesheets. Sass documentation (sass-lang.com) Variables $red: #833; body { color: $red; } Nesting .markdown-body { a { color: blue; &:hover { color: red; } } } to properties text: { align: center; // like text-align: center transform: uppercase; // like text-transform: uppercase } Comments /* Block comments */ // Line comments Mixins @mixin h
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法 | オンスタ | オンラインで学習するための近道になるサイト
オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。
Vue CLI 3でグローバルなSCSSを読み込ませる - Qiita
src/ |- assets/ | |- sass/ | | |- abstracts/ | | | |- _functions.scss | | | |- _mixins.scss | | | |- _variables.scss | | | | | |- base/ | | | |- _reset.scss | | | | | |- layout/ | | | |- _grid.scss | | | | | |- themes/ | | | |- _default.scss | | | | | |- main.scss | | |- prepends.scss | ... | |- App.vue
【CSS】Sassは絶対使った方が良いよ！使い方入門編
【CSS】Sassは絶対使った方が良いよ！使い方入門編 公開日:2019/06/29 /最終更新日:2020/05/25 CSS Technique WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。さらに、通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし！導入しないのはもったいないです。 Sassとは？ そもそも「Sass」とは何でしょうか？ Sassは「Syntactically Awesome StyleSheet」の略です。 Syntactically ＝ 文法
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
【Nuxt.js】Sassの導入方法 - Qiita
🎈 この記事はWP専用です https://wp.me/pc9NHC-sc 前置き Sassを使えば スタイリングを入れ子にして書けたり、 スタイリングの値を変数したり、 管理が便利で見やすくなります🌟 そもそもSassとは何か、 そして導入方法や使用例をご紹介🎀 Sassとは Syntactically Awesome Stylesheets 構文的に素晴らしいスタイルシート！ 前置きの通り、 スタイリングの管理が便利になるものです🌟 2種類の記法 この2つの書き方があります。 SASS記法 SCSS記法 SassとSASSが非常に紛らわしいですね😂 Sassは言語で、SASSが記法です✍️ SASS記法 セレクタ やクラス名の {} や 値の後ろの ; を書かない書き方 style lang はsass
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#2 ｢SCSS入門講座｣ ネストや親セレクタの参照など基本的な拡張機能について学ぼう
主流のCSSプリプロセッサ→Sass, Less, Stylusの比較 - Qiita
SassとSASSとSCSSの違いについて