Dreamweaverで覚える最新Web開発ワークフロー: Sass編 | Adobe Blog
Dreamweaver CC ベータ版で追加された CSSプリプロセッサー CSSプリプロセッサーとは、SassなどのCSSメタ言語（CSSの元になるファイル）からCSSファイルにコンパイル（変換）するプログラムのことです。従来、CSSメタ言語をCSSにコンパイルするには、ターミナルやSassをコンパイルするアプリケーションに頼らならければなりませんでした。 Dreamweaverベータ版では、SassやLessのコンパイルに必要な環境が自動で構築されます。Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整います。CSSメタ言語のコンパイルはファイル保存のタイミングで自動的に行われ、コマンドプロンプトなどを使わずに、CSSが生成されます。 本記事では、Sassを中心にDreamweaverベータ版の関連機能の使い方を取り上げます。 Sass自体
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
Sassの変数の仕組みとOOCSS
A List Apartに掲載されたA Vision for Our Sassという記事を読んでいた。ここに書かれていることが正しいとすると、やはりOOCSSあってのSassなのかなという思いを強くした。でも、今のSassの変数の仕組みとCSSのフラットな構造を考えると、Sassを使ったOOCSSの実現は既に詰みかけている局面だと考えることが多い。 例えばFunction over Presentationの例を見てみよう。 $primary-color: #b32293; //magenta $secondary-color: #2f6b49; //green これは確かに機能すると思う。しかし大体においてカラーパレットは最低でもあと5色くらいは必要になることが多いだろう。もちろん$primary-colorのバリエーションであったりするわけだが、それらの名前付けはどうするのだろうか。例
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Sass 3.3の新しいデータ型: マップ
SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1か月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセットで書く、というようなもの。例として、プロ野球セ・リーグの各チーム色を背景色にしたクラスを吐くもの作ってみる。 $team-colors: ( giants: #f90, tigers: #fc0, carp: #f00, dragons: #009, baystars: #269, swallows: #03c ); @each $team, $color in $team-colors {
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 │ ├
[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons
最後はオプションで上から、サイズ変更、inputやbuttonなどのフォーム要素、ラッパー付きのボタン Buttonsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル Buttons.zipをButtons- GitHubからダウンロードし、外部ファイルとして記述します。 <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/button.css"> Step 2: HTML あとは、HTMLにボタンのスタイルを使うだけで実装できます。 デモのHTMLは、こんな感じです。 <a href="#" class="button button-rounded button-flat-primary">press me</a> <a href="#" clas
Windows対応のSassとかのフリーのコンパイラ
気付いたら、三ヶ月更新なし・・・(；´Д｀) 最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。 良ければ見てください！＞＜ ねこねこキューブ ～ スコティッシュフォールド『アル＆イブ』の今日この頃。 さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。 以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。 Windowsで使えるってのが大事です。ボクはWindowsな人なので。 Koala 一つ目は、Koala と言うコンパイラで、更新頻度も高い感じでRubyさえインストールされていれば、すぐに使えます。 このコンパイラは、次のアップデートでほぼ確実に日本語対応が決定してます。 また、動作もかなり軽い感じで、相当使い勝手が良
Sass Style Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or hel
【Sass】カラージェネレーターっぽく使ってみる。 | バシャログ。
家から5分の立ち飲み屋が21時閉店でつらいhakoishiです。 さて、今回はSassをカラージェネレーターっぽく使ってみるサンプルなど。 色の属性を変更する方法と、色相差を指定して配色を作るmixinのご紹介です。 属性を変更 まずは下準備として。 基準色（$sampleColor として定義）から色相、明度、彩度の3属性に分解します。 色相（0.0-360.0degの範囲で取得） hue($sampleColor) 彩度（0-100%の範囲で取得） saturation($sampleColor) 明度（0-100%の範囲で取得） lightness($sampleColor) 色相の対応は下記の図を参照のこと。赤を0degとして右回りです。 その後、必要な属性を変更してカラーコードに戻します。 変更後の属性はそれぞれ下記の変数に格納されているものとします。 色相→$newHue、彩度
Naming Media Queries | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. It would be pretty cool if we could do this someday in CSS. The best idea for it that I’ve come across is to define it in a <meta> tag in the <head>. That way (perhaps) CSS could use it and JS could use it. Like window.matchMedia(nameOfMyMediaQuery) or @media (nameOfMyMediaQ
WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass
下記、画面のように表示されれば、Rubyがインストールされています。 続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。 最新の状態であれば、下記のように表示されます。 最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。 SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、 ウィンドウは閉じずにいてください。 ● SassとCompassインストール そういえば、ここまで何の説明もなく来てしまいましたが、 SassとかSCSSとかComapssって何？という方もいるかと思いますので、 ちょっとだけ説明をします。 Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、 ミックスイン(機能テンプレートのようなもの？)や変数を扱えたりしますが、 CSSとは似て非なるものなので、
MacのCodeKitでCompassを使う
MacのCodeKitでCompassを使う Compassに関するエントリーを書いていたら、「scoutとcodekitでそのうちできるようにならんかな」というツイートをいただきまました。 CodeKitにはCompassが含まれてますのでCodeKitでは可能です。(CodeKitに関してはフロントエンドの開発を加速するCodeKit :: 5509を参照してください) CodeKitのサイドにあるプロジェクトの一覧から、Compassを利用したいプロジェクトを右クリックして、「Compass」→「Use Compass on this project」を選択。 初回は確認画面が表示されますので「New Config File」を選択。 Compassの設定画面が表示されるので画象フォルダやCSSフォルダなどの設定をし「Create Config File」を選択するとCompassが
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
Media Queries Mixins for Sass
Do you like Responsive Web Design? Everyone does! Here you can find a collection of useful media queries mixins for Sass 3.2.0+.What is it? Do you like Responsive Web Design? Everyone does! Here you can find a collection of useful media queries mixins (including iOS devices like iPhones and iPads) for Sass 3.2.0+ Who did it? Just me - Rafal Bromirski - if you want you can follow me on twitter or c
「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
HOME>Web>「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass（Scss）とは？ Sass（Scss）とは？ Sass（Scss）とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。（記述方法が違う） ちなみに、私はScssを利用しております。 どんなことができるの ではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Loading...
LessやSass、CoffeescriptなどをコンパイルできるWindows用ソフトウェア・「Prepros」
1216彩票-官网平台