よく使うSassのmixinとfunctionのスニペットをまとめてみた
こんにちは。TAK(@tak_dcxi)です。 2020年最後のZennの投稿ということで、Web制作テンプレートの年末大掃除も兼ねて僕がよく使うSassのmixinとfunctionを厳選してまとめてみました。 Sassを使っている方でmixinとかfunctionをあまり利用してないという方は参考にしてみてください。 ブレークポイントの指定 おそらくmixinで最も利用されているのはレスポンシブでのブレークポイントの指定だと思います。 $breakpoints: ( 'xs': (min-width: 0), 'sm': (min-width: 576px), 'md': (min-width: 768px), 'lg': (min-width: 992px), 'xl': (min-width: 1200px), 'xxl': (min-width: 1400px) ) !defau
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
FLOCSSベースのオレオレCSS設計の紹介 - Latele Blog
ここ数年くらい、自分の中のCSS設計はFLOCSSベースで割と安定しているかなと思ってるので、制作会社のブログっぽくCSS設計に関して何やかんや書いてみたいと思います。 今回の内容はあくまでも自分のCSS設計ってこんな感じですよって話なので、「平澤ってこういう風に設計してんのね、ふーん。」程度でお願いします。 コレを参考にして破綻したって責任は持てません！ FLOCSSを選んだ理由 色んなCSS設計を調べたりして検討していた頃、最終的に落ち着いたのが谷さんが提唱してるFLOCSS（フロックス）でした。 FLOCSSを提唱してる谷さんは、Web制作者のためのCSS設計の教科書の著者でも有るので、書籍を購入してFLOCSSを参考にした方も多いのではないでしょうか？ と、ちゃっかりアフィID貼ってAmazonにリンクしておきましたので、CSS設計ってなんです？って方はちょっと古い本ですが、ご購入
CSSコーディングで泣かないためのSassの基礎知識と10の利点
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
Sass 3.3で追加された「関数」や「変更点」のまとめ解説
前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 – 林家次男
Deprecated: Hook custom_css_loaded is deprecated since version jetpack-13.5! Use WordPress Custom CSS instead. Jetpack no longer supports Custom CSS. Read the WordPress.org documentation to learn how to apply custom styles to your site: https://wordpress.org/documentation/article/styles-overview/#applying-custom-css in /home/ho2/hayashikejinan.com/public_html/wp-includes/functions.php on line 6078
【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する
前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ！と言うのをTwitterで@grfxdsgnさんから教わりました。 バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください！ こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。 久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。 バッチファイルって？ ウィキペディアとか見てもらうと色々書いてありますが、黒い画面で実行できるコマンドをテキストファイルに記述したもので、これを実行すると黒い画面がそこに書いたコマンドやらを読んで実行してくれます。 その際、拡張子は通常「.
昔のCSSをLessとかSassにしたいの
ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。 しかし、世の中には便利なツールを作ってくださる開
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
Sass のカスタム関数の書き方
Sass は ネイティブ関数 のほかに、@function ディレクティブ を使ってカスタム関数を自由に定義することができます。僕もより共有や再利用のしやすいものを作るべく試行錯誤していますが、ここではそのうち最近試しているいくつかのパターンについて書いてみました。ご意見求む。 接頭辞 attr() や calc() など CSS のネイティブ関数や percentage() や type-of() といった Sass のネイティブ関数と名前が衝突するのを防ぐため、カスタム関数の関数名に接頭辞をつけることを検討しています。現行の CSS/Sass だけではなく将来追加される新しいネイティブ関数も考慮するとやはり何らかの対策をしておきたいところで、接頭辞は現実的な解であるように思います。Sass リファレンスの 関数ディレクティブの項 でも以下のように接頭辞の採用を勧めています: It is
WordPressでSass,Lessが使える！Jetpackでブラウザからコンパイル！
WordPress.com(ブログサービスのほう)のCSSエディターがSass・Lessに対応したようです。 WordPress.comの機能はパッケージ型のWordPressでもJetpackプラグインにより提供されているので早速試してみました。 とりあえずプラグインをインストール。 1. プラグインからJetpack by WordPress.comをインストール。 2. WordPress.comのアカウントが必要なので登録しアカウント認証。 インストールと認証が完了するとJetPackのメニューが現れます。 JetPackのメニューからカスタムCSSを選択。 もしくは、「外観」から追加された「CSS編集」。 CSSスタイルシートエディター画面にいきます。 この「カスタムCSS」とは、テーマのstyle.cssとは別のCSSで、 テーマのCSSをいじらずに外観を編集する際に使用します
CSS エディターが CSS プリプロセッサ Sass・LESS に対応
WordPress.com では CSS エディタに便利な拡張機能を追加してくれる、CSS プリプロセッサの Sass と LESS に対応しました。 CSS（カスケーディング・スタイル・シート）は、コンテンツとその表示制御を分けるために便利なツールです。投稿者はコンテンツを書くことだけに集中でき、CSS に表示やフォーマットのルールを任せることできます。CSS はサイトの外観をカスタマイズするのにとても役に立ちますが、ただ、管理が煩雑になることもあります。 この解決方法として「CSS プリプロセッサ」があります。 （CSS をあまり使ったことがない方は、まずは CSS 入門チュートリアルをご覧ください。すでにセレクタについてよく理解している方は、以下を参考にスタイルをメンテナンスしやすくなる CSS プリプロセッサを活用してみてください） CSS プリプロセッサは CSS の拡張機能で、
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
イマドキのコーダー環境構築2016
CSS拡張メタ言語「Sass」の概要と導入手順
Sassと仲良くお付き合い
CSSをSass（Scss）に変換してくれるサイト「css2sass」
StartUp Sass + Compass [基本と活用]![StartUp Sass + Compass [基本と活用]](https://cdn-ak-scissors.b.st-hatena.com/image/square/7768d8b0c259cc3fe69178f4113b7eb1890d4d61/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fsasscompasscmujp01-130223095651-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
