タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 SassについてSass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。 メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。 SassはCSSに変換（コンパイル）する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。 GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。 Sass(SCSS)を始めよう
stylelintをSCSSとVSCode(Stylelint拡張機能)に導入しようと思ったんだけど、14系[1]には破壊的変更[2] が含まれてるらしく、ドキュメント通りにやってもエラーが出てしまったり、ネットで検索しても出てくる記事が13系以前のものだったりして苦労した。何とか導入することができたのでどうやったかを記録したいと思う。 やりたいこと SCSSにstylelintを導入する yarn stylelint hogehoge.scssとかやったらSCSSファイルにstylelintを実行できる プロパティのソートもやってくれる VSCodeにstylelint拡張機能を導入する エディタ上にリアルタイムでエラーを出してくれる 保存時に自動で修正してくれる 結論 インストール yarn add -D stylelint stylelint-config-standard-scss
BLOG ブログ ホーム ブログ dart-sass 採用に伴い scss ディレクトリ構造を考える scss でファイルを呼び出す際に使っていた【@import】は廃止され、代わりに【@use】【@fowerd】を使うように推奨されています。 なので【dart-sass】を採用します、それに伴って scssディレクトリ構造 や ファイルの紐付け に関してをルール化しようと思います。 dart-sass 環境準備 私は通常、指定がない限りタスクランナー(gulp)を使用して構築しています。 gulp を使用する場合であれば【gulp-dart-sass】【gulp-sass-glob-use-forward】各々のパッケージをインストールする必要があります。 gulp-dart-sass gulp-sass-glob-use-forward scss ディレクトリ ┣━ style.scs
SCSSのファイル設計について Vol.2 前回の記事の続きです、SCSSファイル設計について解説していきます。 必要なディレクトリ構成は次になります。 - scss - base - mixin - module - page - pulgins - setting style.scss 前回の記事で、baseディレクトリ、mixinディレクトリ、moduleディレクトリについて解説しました。 baseディレクトリに関しては、リセットCSS用の_reset.scssとサイト全体のベースとなる_base.scssが格納されます。 mixinディレクトリには、別Blockで同じスタイルが必要になった場合にmixinを定義するというルールで、mixinファイルを作成します。 moduleディレクトリには、サイト共通で使用するモジュール単位（Block単位）で定義されます。 また、吉本式BEM設
CSSのmin()やmax()はとても便利ですが、SCSSで使用するとコンパイルエラーが起きます。 ではSCSSでmin()とmax()は使えないのか？ いいえ、そんなはずはありません。unquote関数と併用することで解決できます。 とても簡単で以下のように書くだけです。
2018年の終わりに改めて gulp 4系で sass (scss) をコンパイルする 2018年の終わりが目前に迫った年の暮れ、改めて gulp にて sass をコンパイルする環境を構築してみました。 仕様 gulp 4系を用いる scss を css にコンパイルする autoprefixer でベンダープレフィックスを補完する minify （以下 圧縮）した .min.css も生成する 圧縮していない css に sourcemaps を付与する ディレクトリ構造 root/ ├─ dist/ # コンパイルされたファイルの出力先 │ └─ css/ # cssのディレクトリ │ ├─ main.css # 出力されるsourcemaps付きのcssファイル │ └─ main.min.css # 出力される圧縮された本番用cssファイル │ ├─ src/ # コンパイル前の
はじめに 業務の空いた時間を使ってSCSS記法のチートシートを作っていたら、Qiitaの記事としてまとまりそうな内容になったのでブラッシュアップして記事にしてみました。 また今回の内容はあくまで書き方に焦点をあてたものなので、Sassの導入には触れていません。色々な導入方法があるので、ご自身の環境に合ったものを導入していただければと思います。 ちなみに私は業務外では「node-sass」、業務では「gulp-sass」でコンパイルしています。 基本的な書き方 ここを抑えておけば、SCSSで書かれたファイルの読み書きができるであろう知識をまとめてみました。 変数 Sassではプログラミング言語のように変数に任意の値を格納することができます。 数字、文字列、色（blue、#04a3f9、rgba(255, 0, 0, 0.5)といった指定）、ブール値(true/false)、マップ、リストを格
今まではgulpを使ってきたのですが、最近はnpm-scriptsが流行りつつあります。 というのも、gulpだとどうしてもパッケージを大量に管理する必要があったり、gulpfile.jsがかなり複雑になりがちです。 package.jsonにある程度まとめて記述することで、管理するファイルも少なくなり、開発環境もシンプルになります。 今回はそんなnpm-scriptsで、SCSSのコンパイル方法についてまとめておきます。 npm scriptsを使う準備gulpを使ったことがある人であれば問題ありませんが、npmを使う必要があるのでNode.jsをインストールしている必要があります。 過去にいくつか記事にしているので、まだインストールしていない人はそちらを参考にインストールしてください。 現時点では、nodenvを使ってインストールするのをオススメしています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass（SCSS記法）の書き方紹介 | 東京のホームページ制作 / WEB制作会社 BRISK
Stylelint(14系)をSCSSとVSCodeに導入する2022
dart-sass 採用に伴い scss ディレクトリ構造を考える
SCSSのファイル設計について Vol.2 吉本式BEM設計（BEM設計ベース）
SCSSでmin()やmax()を使う時はunquote()が必要です
2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】 - Qiita
Sass初心者の自分のためにSCSS記法チートシートをつくってみた - Qiita
npm-scriptsでSCSSをコンパイルする環境を構築する方法
www.kyounoryouri.jp
gori.me
prtimes.jp
nenrei-skincare.webnode.jp
www.ikyu.com
www.fender.com