サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
仕事で案件に関わっていると、特段必要がないにも関わらずSass機能を使っているファイルを見かけることがある。 例えば、 $font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino KakuGothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif; $font-size: 87.5%; body { font-family: $font-family; font-size: $font-size; }一体何の意味が？ 変数を使う必要がない。 実務におけるSassの使い方を見直す。 設定しているミックスインフォントサイズpx or rem の場合は2行目と3行目を使用% の場合は4行目のみを使用16 はブラウザデフォルトのフォントサイズbody でフォントサイズを指定する場合
概念を知って満足しちゃうのはやめようと思ったWebディレクターのふもぱん先生（他称）です。 昨年2015年12月26日（土）、CSS Nite「 Shift9：Webデザイン行く年来る年（CSS Nite LP43）」に参加してきました。「マークアップ」のセッション（「2015年のマークアップの話題を総まとめ」小山田晃浩さん / 益子貴寛さん / 久保知己さん）で取り上げられていたのがタスクランナーの「Gulp 」。細かい定義はお調べいただくとして、要は「自動化ツール」のこと…というと乱暴でしょうか。 私もディレクターのはしくれですので、その存在やメリット、デメリットは概念的に知っていました。ただ、普段はディレクション中心のため、あまり切実に必要なものではありませんでした。「インストールなどの環境づくりが面倒」という風評もよく目にしていましたので、なかなか実践しようとは思わなかったのです
$baseColor: #AD253A; 変数を代入 body{ background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。 Sass（SCSS）は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。 使い方によっては、素のCSSよりも分かりにくくなります。 ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。 Sass（SCSS）とは Sassとは、Syntactically Awesome Style Sheetsの略です。CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。 実際にブラウザで認識させるには、CSSに変換する必要があります。 Sass: Syntactically Awesome Style Sheets 二つの書き方 Sassには、二つの書き方があります。 インデントでネストを管理し、｛｝や；が必要がない書き方。 拡
2016 - 01 - 30Mac（El Capitan）でSassとCompassをインストールしようとしたらエラーになる Web開発CSS スポンサード リンクMac（El Capitan）にSassとCompassをインストール 開発で使うアプリを順番にインストールしていたのですが、SassとCompassのインストールができませんでした。なぜかエラーが出てしまいます。 ▼まずはgemをアップデートsudo gem update --system ▼続いてSassをインストールsudo gem install sass ▼しかしインストールできずエラーになりますERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass エラーの内容から詳細を調べたところ、どうや
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f41a2e814247663ad1040b747f3c634ccd698a028%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201404%252F2014111701.png&f=jpg&w=240)
いまさらですが、SassとCompassの環境を導入しました 以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました 前置きはさておき、今回は環境構築についてです 私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです…RubyのインストールMacは最初から入っているようですが、WindowsはインストールしなければいけないようですWindowsユーザは、下記URLからダウンロードしてくださいRubyInstaller 次に、念のためRubyがインストールされて
Translation of: Getting Started with Sass - A List ApartCSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
What's this?HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコードSQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッターHTML/XMLフォーマッターEmmet toolkit for <textare
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。csscombcsscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
Compassで簡単、CSSスプライト作成 第1回CSSスプライト作成の基礎 CompassでCSSスプライトが手軽にできるのをご存知ですか？ この記事ではCompassでCSSスプライトを作成する基礎を解説します。業務で使うものですから、生成の仕組みもおさえておきましょう。 はじめに 手作業で作ると、ものすごい手間がかかってしまうCSSスプライトですが、Compassを使えば、非常に簡単に実装することができます。このシリーズではCompassのCSSスプライト機能を解説し、Retinaディスプレイ対応のCSSスプライトmixinを作ってみます。 Compassと私 Compassについては、CodeGridでSassの連載時に、簡単に触れました。 SassとCSS設計 - 運用と管理 | CodeGrid Compass Home | Compass Documentation Com
今回はCSS拡張メタ言語をご紹介します。 なにそれ？って言う方も多いと思います。私も最近までそうでした。どうして知ったかというと前回の記事でCSSフレームワークでツイッターブートストラップがLESSを使用されているのです。それでコレなんだろって調べたらわかったんです。因みにツイッターブートストラップのSCSS版もあります。 簡単に言うとCSSをより簡単に記述しようってことです。CSS記述するとき重複したり、それぞれのブラウザに対応するような記述やあとCSS3対応させるためになんだか長い記述しないとダメですよね。-webkitとか-mozとか。 そういうのを解消したものなんですね。自動的に計算なんかもやってくれる機能もあります。 スポンサーリンク これはかなり便利な機能です。 最初にやるなら断然LESSだと思います。javascriptで簡単に実装できるしすぐに体感できるので。ウェブ上にア
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
今さらそのネタｗｗｗ何言ってんのｗｗｗｗｵｯｿｗｗｗｗｗ とか言われないために、そろそろSASSとかCompassとかその辺りを使う環境を整えてみませんか？ 便利なのはわかってる。けど・・・ SASSに関する専門書も販売されて講習会なども行われ、これからどんどん目をする機会が増えてくると思います。 すでにネットや周りで噂を聞いて「便利そう」と思ってる人も多いはず。 でもなんで手を出せないのか・・・ 今のCSSで十分 やろうと思ったけどRubyとかgemとかなんとか書いてて、よくわからない あの黒い画面が苦手 よくわからない？CUI（あの黒い画面）が苦手？もうそんなことは言わせない！！そんなあなたにコレ！！ これマジいいんですよ。英語版ですけど。でもほんとタガログ語の人でも使えちゃうレベル。 とりあえずこれでcompassを使ってみるのはどうでしょうか？ WinでもMacでもこれでいけますし
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
