SCSSの変数と、CSS3のcalc()を併用するには - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【webpack2対応】俺が作り上げたSCSSのビルド環境を晒す【リントもあるよ】 - Qiita
はじめに もともと業務でscssを使うための環境を作ってたのですが、ちょっと後輩に丸投げしてた目を離した隙にwebpack周りも色々と状況が変わっていたので、これを機に色々調べ直して設定し直したりしました。 やりたかったこと webpackでscssをビルドする jsで出力されるのは困るのでcssで出力する ベンダープレフィックスは自動でつけてほしい -mozとか書きたくない リントチェック欲しいなぁ... まぁ、これはwebpackじゃなくていいか webpack2でのscssのビルド パッケージインストール まずは必要なパッケージを入れましょう。 今回scssのビルドに使ったパッケージは autoprefixer css-loader extract-text-webpack-plugin node-sass postcss-loader precss sass-loader styl
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
webpack 4入門：スタイルシート(CSSやSass)を取り込む方法 - Qiita
この記事は大幅に加筆して「最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA」に引っ越しました。 上記の記事ではwebpack+CSSの手順を網羅的に解説しています。 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 webpack 4でExtractTextPluginを利用する方法(webpackでCSSファイルとして書き出す方法) ※Google検索等で訪れた方がリンク切れになると申し訳ないので、このページは残しておきます。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently r
npmでミニマムに始めるSass - Qiita
GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。 sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 また、Compassというものも出てきたりします。 CSSの常識が変わる！「Compass」の基礎から応用まで！ またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。 gulp インストール～基本設定の備忘録（windows） ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがいいのだろうと
htmlのimgタグを使わずに画像を表示させる方法とhtml,slim,css,scssでの記述方法 - Qiita
今日はどうしてimgタグで表示させられる画像をcssで表示させる必要があるのかということから、cssで表示させる方法までをお話しします。 どうしてcssで表示させるの？ htmlでimgタグを使って画像を表示させるにはaltタグで代替テキストを書くことが必須であったりと文字数を食ってしまいます。文字数が多くなると、htmlのデータが大きくなってしまって、それが積み重なると読み込むのに時間がかかってブラウザにページが表示されるのが遅くなってしまいます。 なので、文書としてなくても困らない画像は、cssで表示させるのが良さそうです。全てをcssで表示させない理由としては、代替テキストなどからwebページの内容を理解する人もいるからです。 それでは、本題であるcssでの表示方法をご紹介していきます。 htmlに画像を表示させたい場所をdivを使って記述する 今回の例は、webサイトのメインの画像
フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法 - Qiita
今回は、基本のformをtableタグを使わずに、きっちり整列させる方法です。 コード量が増えるので、わたしはtableタグがあんまり好きじゃないんです(>o<) でもtableタグを使わないと、きちんとinputとlabelが揃わない状態から抜け出せなくてすごく困っていました。なんとか中央寄せで、それぞれの要素の縦のラインが綺麗に揃う方法を見つけたのでご紹介します。 使うタグは「ul,liタグ」！ ulタグとliタグを使えば、form要素を簡単に綺麗に並べることができます。 まずは基本となるhtmlを書いて、フォームを表示させます。 ポイントは「ul,liタグ」を使うことです！ <form> <ul> <li class="name"> <label for="name">Name<label> <input id="name" type="text" name="name" place
Sublime Text 3 で構文エラーチェックする設定のまとめ - Qiita
Macの場合を例に説明していきます。 事前にPackage Controlをインストールしてプラグインの管理が行えるようにしておきましょう。 cmd + shift + P でCommand Paletteが表示されるので、[Install Package] からプラグインのインストールに進んでください。 基本プラグインをインストール SublimeLinter まず上記のプラグインをPackage Controlからインストールしましょう。 構文エラーを自動的にチェックするためのプラグインです。 エラーのある箇所に印がついて、エラー理由を指摘してくれます。 このプラグインと別にそれぞれの言語に対応したプラグインをインストールしていきます。 SCSSの構文チェック SublimeLinter-contrib-scss-lint 上記プラグインをPackege Controlからインストール
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレなcssを突っ込んでみて挙動を確認して頂ければ幸い。 また、下記のリファレンスが総括的で解りやすい。ご一読あれ。 Sass 3.2 オレオレリファレンス ヤバいを連
SPAじゃなくてもWebpack導入（ファイル監視&自動リロード + レガシーブラウザ対応 + JS最適化 + ES2015(ES6) + SCSS + ESLint） - Qiita
Septeni Originalの大久保です。 世間ではSPAが流行ってるかと思います。 ただHTMLのレンダリングはサーバー側で行うケースは以前多いのではないでしょうか？ 現在自分が携わってる新規プロダクトでモダンなフロントエンドの技術（WebapackやES2015など）を使いつつ、HTMLレンダリングはサーバーに委ねるようなアーキテクチャ（Multi Page Application）の調査を行ったので、そこでの知識を備忘録的にまとめたいと思います。 今回作成したコードはGithubにあげているので、興味あればご参照ください。 Github URL：https://github.com/yoppe/webpack-es2015-base-for-play #やりたいこと バックとフロントのGitリポジトリを分けずに作る。 ⇒ リリース時などにバックとフロントを別々にリリースしたりデプ
WindowsでSass環境を構築 - Qiita
Sassでコンパイルできる環境と、生成された CSS をWebブラウザで localhost として参照できるようになるところまで。 サーバサイドのことをよく知らない人用。 scss ファイルはすでにチームメンバーが git にコミットしていて、新たなメンバーが参入し、開発環境を構築する、という状況を想定してます。 インストールするものは3つ。 Ruby Sass Nginx（ApacheでもOK） Ruby をインストール Ruby-1.9 から RubyGems（後述）が標準付属となったため、1.9 以上をインストールする。今回は安定版の Ruby 1.9.3-p392 をダウンロード http://rubyinstaller.org/downloads/ インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。 コマンドプロンプト起動 Window
sass-globbingでSassファイルをお手軽管理 - Qiita
皆さんは、1ヶ月間用コンタクトレンズを2週間用だと勘違いして使ってた経験ありませんか？ぼくは、あります(´Д⊂ヽ さて、今日はSassのファイル構成について考えてみたいと思います。Sassを使えば@importを使ってお手軽にファイルをモジュール管理できますね。ということで、私が作ったCSSフレームワークMapleでも下記のようなファイル構成で管理しています。 t32k/maple ├── css │ ├── maple.css │ └── sass │ ├── maple.scss │ ├── _core.scss │ ├── _modules.scss │ ├── core │ │ ├── _base.scss │ │ ├── _helper.scss │ │ ├── _layout.scss │ │ ├── _reset.scss │ │ └── _settings.scss │ ├
Sinatra + haml + Sass + CoffeeScript + Backbone.js ON heroku のサンプルコード - Qiita
最近の統合的フレームワークって何？ 日進月歩のこの世界、少し気を許すとすぐに次のトレンドが来てしまう。 そんな中、恐らく現状（2013/11/05）で、 トレンドに近い統合的フレームワークをご紹介します。 まずは、それぞれのライブラリを説明したのちに、 実際の構築方法をおって説明していきます。 ※ ソースはこちら https://github.com/siluejp/sinatra_start heroku いわゆるサーバを貸してくれるとこ。 RubyをメインにしたPaaSです。誰でも無料で始められます。 最近では、有志のおかげで、Ruby以外にも言語が拡張されて色々できるようになってます。 無料版は一定時間使用していないと、起動時に時間が掛かるなどのデメリットもあります。 あと、クレカ登録しないとadd-onが使えない。 でも、コマンドラインだけで手軽にサーバーが追加できるので重宝させて
Rails での適切な Sass の構成手法について（翻訳） - Qiita
Sass のディレクトリ構成やファイル管理の仕方は、プログラムを管理しやすくする上でとても重要だと思いますが、まだまだ日本語での記事はあまり見かけません。 そこで、海外サイトで素晴らしい記事（Q&Aでのコメント）を見つけましたので、御本人の許可をいただいて和訳させていただきました。 Sass ファイル読み込みの際のかなり基本的な部分についての解説ですが、とても丁寧にアドバイスされており、CSS/Sass 初心者にもわかりやすい内容だと思います。 Rails での Sass のコンパイルはどうなっているの？ Stack Overflow で、（質問の概要をざっくりまとめると） 『Rails の stylesheets の読み込み順についてよくわかりません。 思った通りにコンパイルできないのですが、どうしたらエラーを解決できますか。』 という質問が投げられていました。 以下、その質問に対しての
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassで色を調整する - Qiita
https://qiita.com/debiru/items/4771e270902de7c5cc6e
背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法 - Qiita
gulp で jade と SCSS と CoffeeScript 動かす為のメモ - Qiita
https://qiita.com/debiru/items/28d54b5c1e295d880cd3
MacでSCSSを使うための手順（Sass+Compass） - Qiita
