【Sass】SASS記法からSCSS記法に変換して、SCSS記法を使用したいのだ | バシャログ。
やっピー、石田です。 ここ最近、のりピー語を流行させようと多用してます。 「よろぴく」ものりピー語から来ていたのを知り、びっくりしたピー。 さてさて、今回はSassについてです。 Sassの記法は2種類 今ではSCSS記法が主流となっていますが、 Sassはバージョン3.0前までは、SASS記法のみでした。 バージョン3.0からSCSS記法が導入され、これまでCSSを利用していた人にとっては移行しやすいのもあり、いまではSassといったらSCSSって感じになってますね。 しかーし、バシャログ。メンバーはこれまでSASS記法をとりいれていました。 SASS記法を使ったことがない方も多いかと思いますので、 ここで簡単にご説明しますね。 SASS記法についてのおさらい ファイル拡張子は、「.sass」 波括弧（{}） のかわりに インデントを使用する セミコロン（;）が不要 プロパティ後のコロン
Sassで色を調整する - Qiita
sassでベースカラーを元に色の変更を行う関数を忘れがちなのでメモ HSL［色相（Hue）、彩度（Saturation）、輝度（Lightness）］ベース Photoshop等で使用されるHSB(HSV)［色相（Hue）、彩度（Saturation）、明度（Brightness・Value）］ではない HSBで色を変換したいときは「Sassで色空間『HSB』を扱う関数を作った話」で関数を作成されています 色相の変更 adjust-hue($color, $degrees) 色相環の度数($degrees)を○○degで指定 // ベースとなる色 $base-color: #79a5e0; .adjust-hue { color: adjust-hue($base-color, 60deg); }
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」 - NxWorld
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
Sassを使ったz-indexの管理 - Qiita
$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }
Googleトレンドに見る2016年人気のCSS・JavaScript・タスクランナー - Qiita
(2016/05/23 追記) 記事内で取り扱っている技術で、はてぶコメント等で質問の多かった「webpack」についての解説記事を書きました。 最新版で学ぶwebpack入門 – JS開発のモジュールバンドラ - ICS MEDIA Web技術はよく技術の進化が早いと言われます。多くの技術が現れては消える中で、どの技術を学ぶべきかを選択するのは重要です。選択するポイントの1つに「技術の将来性・人気があるかどうか？」があります。今回は基本的なフロントエンド技術である「CSSコーディング」「JavaScriptプログラミング」「タスクランナーとビルドツール」の3つについて、それぞれの人気をGoogleトレンドで調べてみました。 CSSコーディングの流行り CSSは、SassやLESSに代表される「CSSプリプロセッサー」を使ってプログラミングすることで、品質と効率を大きく向上させることが可能
僕がネイティブなCSS変数にわくわくする理由
数週間前、CSS変数（より正確にはCSSカスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
Sassの変数を使って少し快適にBEMを使う - Qiita
cssのクラスをBEMを参考に命名しています。これにより名前の衝突の可能性を下げ安心してcssを書いていくことができます。反面、文字数が長くなるので打つのも読むの大変になります。 .my-awesome-block { padding: 20px; } .my-awesome-block__element-1 { > p { font-size: 16px; } } .my-wesome-block--modifier { .my-awesome-block__element-1 { > p { font-size: 24px; } } } $block: ".my-awesome-block"; $block-modified: "#{$block}__modifier": $element1: "#{$block}__element-1"; #{$block} { padding: 2
現在のプロジェクトで使用している CSS 設計ルール (BEM ベース) のまとめ - Qiita
この記事は、現在僕が携わっているひだまりプロジェクト (仮称) で使用している CSS 設計ルールについてまとめたものです。 ベースとなる CSS 設計 BEM (MindBEMding) BEM 自体についての説明は省略します。 一部 SMACSS を参考にした独自ルールを取り入れています。詳しくは後述します。 (1) Element をネストしない BEM を使用する際の大原則として block__element という対応関係を厳守します。 NG category__item__name は block__element1__element2 と Element がネストしています。 <head> <style> .category-list {} .category-list__item {} .category-list__item__name {} </style> </hea
もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選
同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 html <section id="nav"> <ul> <li class="nav_home"><a href="#">HOME</a></li> <li class="nav_about"><a href="#">ABOUT</a></li> <li class="nav_company"><a href="#">COMPANY</a></li> <li class="nav_contact"><a href="#">CONTACT</a></li> </ul> </section> <!-- / #nav --> 以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========
Sass変数の(ダメそうな)案
時代はとっくにSass 3.4なのでローカル変数メインにしたいということが前提にある。そうすることで変数名にBEM等のしっかりとした命名規則を使わずに済み、自己言及的な変数名と数文字の変数名でおおむね完結することになる。パーシャル間で共有したい場合はしょうがないので!globalを使ってローカル変数をグローバルへエクスポートするようなあきらめを許容して誤魔化す。 まずある程度はグローバル変数として定義しておく必要がある。それらグローバル変数は自己言及的なもの(それこそ$color-black: #000;といったようなもの)で、実際にウェブサイトで使われる要素やクラスとは無関係に定義していく。 // _variables.scss $ratio: 1.7; $ratio-text: 1; $ratio-text-large: 1.5; $line-height-default: $rati
フロント開発時のSCSSファイルのひな形をさらす - Qiita
/* * base.scss * Kenju Wagatsuma */ @charset "utf-8"; /* * Import */ @import "compass/reset"; @import url(http://fonts.googleapis.com/css?family=Roboto); /* * Variables */ // Font stack $body-font: 'Robot', Helvetica, arial, sans-serif !default; $body-font-size: 12px !default; // font-size $font-size-base: 14px !default; $font-size-large: ceil(($font-size-base * 1.25)); $font-size-small: ceil(($fo
Sassの@eachで同じスタイルをラクチンに管理をする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです✌(´ʘ‿ʘ｀)✌ この春デザイナーからフロントエンジニアになりました。 新しい部署になり覚えることもたくさんありますが、落ち着いてがんばります( ∵ ) 今回は、繰り返し処理を行える文＠eachを使って繰り返しのスタイルを楽に管理する方法をご紹介致します。 画像を使い分けたい場合 以下のように、背景にアイコンを配置分けする方法をご紹介します( ˘ω˘)☝ HTML HTMLではこのリストを使っていきたいと思います( ˘ω˘)☝ <section id="nav_image"> <h1>画像を使い分ける場合</h1> <ul> <li class="icon_home"><a href="#">HOME</a></li> <li class="icon_about"><a href="#">ABOUT</a></li> <li class="icon_company"
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点HTMLCSSSassscssCompass あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレな
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassで色を管理する色々な方法 - Qiita