カテゴリー別アーカイブ: Sass

CSSでradioを修飾するときにlabelにidを振るのはエンジニアさんに苦笑いされる

ということでid振らずに何とかならないかね、ということで考えてみたらどうせソースが少し汚れてしまうならばlabel内にspan置けばいいじゃないと。

<label><input type="radio" name="name" value="hoge" />hoge<span class="radio-checked"></span></label>

こんなかんじか。
inputの後ろじゃないとCSS的に指定ができないので注意。

あとはCSSを(以下はSass)

label {
display: flex;
position: relative;
cursor: pointer;
padding-left: 25px;
margin-right: 20px;
.radio-checked {
position : absolute;
left: 0;
display : block;
height: 17px;
width: 17px;
border-radius: 17px;
border: 1px solid #000;
&::after {
position : absolute;
content : '';
width : 11px;
height : 11px;
border-radius : 100%;
left : 3px;
top : 3px;
background-color : transparent;
z-index : 1;
}
&::after {
}
}
input[type="radio"] {
display: none;
&:checked +.radio-checked {
border-color: #f00;
&::after {
background-color : #f00;
}
}
}
}

こんな感じか。
横並びにするのにflex利用したりしてるけどこの辺は好みで好きなようにできそう。

label idよりかはいいのかな。

iphoneなどのスマホでposition fixedにした時にスクロール中にfixedしてくれないからtransform: translate3dで対応してみたらz-indexではまった

タイトルで全てを終わらせている感じ。

ちょっと複雑な重なりあいをテストしていてタイトルの現象にハマった。

<div class="block-1st">
 <div class="saizenmen">最前面に来てほしい</div>
</div>
<div class="block-2nd">
block-1stに少し喰い込む形にする(margin-top:-50px; etc)けど、その内部の.saizenmenよりかは裏に回りたい
</div>

こんなとき。

.box-1stには背景だけ入れてみる。

.saizenmenに
position relative
z-index 1000
transform: translate3d(0, 0,0) //iphoneなどでスクロール中にfixedしてほしいから追加

としてみて、
.block-2ndに
position:relative;

としてみると

優先順位としては
.saizenmen > .block-2nd > .block-1st
になってほしいのにならない。

その理由としてはtranslate3dのz軸の指定が悪さをしていた。
z-indexよりもそのz軸の指示を優先するらしく。

なので
transform: translate3d(0, 0, -1);
とすると当初の想定通りの重なりあいになりました。

文字だけだとわかりづらい。

MacとWinでGulpの同じプロジェクトの作業をしようと思ったらnode-sassが何かエラー

検証環境をかねてノートをMac、デスクトップをWinにしている人は自分だけでは無いはず。

MacとWinだからなのか、ただたんにインストールする時に色々と違ったのか分からないけどどちらかで立ち上げたプロジェクトがどちらかのPCでエラーになる。

そんなときは大体node-sassが文句言ってくるのでそんな時はnode-sassをりビルドすると治るようだ。

npm rebuild node-sass

position:absolute;で設定していた要素をある地点までスクロールしたらposition:fixed;に変更する。けど動きおかしい

なかなかやることが無さそうなシチュエーション。

最初からFixed出来ればラクなんだけど、その要素を通過するまで普通にコンテンツ内にまぎれていて、それを越したら画面中央までアニメーション。そして固定。

スクロールの判定はJsでやる。
ちなみに今回はサイトの構成上、root直下に該当要素を設置。
まるでちょうどとあるコンテンツの下にあるように見せかけるためJsで初期位置を設定。

コツはJsで直接位置を調整するのではなく、Classの付与でCSS側でコントロール。

初期設定

position:absolute;
left:50%;
width:(93/640)*100%;
margin-left:-(93/640/2)*100%;
height:auto;
z-index:100;

Class付与

.scroll{
position:fixed;
top:0% !important;
animation: page_center 0.2s linear 1;
-webkit-animation: page_center 0.2s linear 1;
animation-fill-mode: forwards; 
height:100%;
}
		@keyframes page_center {
			0% { transform: translate(0, 0); }
			100% { transform: translate(0, 40%) ; }
		}

スクロールを上に戻したときにもClassを付与

		.scrollback{
			position:absolute;
			
			animation: page_top 0.2s linear 1;
			-webkit-animation: page_top 0.2s linear 1;
			animation-fill-mode: forwards; 
			height:100%;
		}
		@keyframes page_top {
			0% { transform: translate(0, 150px); }
			100% { transform: translate(0, 0px) ; }
		}

こんど清書しよっと。

sass + koala で急にコンパイルされなくなったとき

作業していて、数分前までは普通に動いていたのに急にコンパイルされなくなったとき。

windowsだとkoalaは問題なくコンパイル完了の「Success」を出す。
が、CSS自体は更新されていない。

悩む悩む。

他のサイトで設定したものはちゃんと吐き出しているので、koala自体が調子悪い訳じゃない。

で、macで問題のサイト定義したscssをコンパイルしてみると
「/bin/sh: compass: command not found」
と出た。

ググってもsublimeの設定ばかりであまり核心をついたものは見つからず。

で、結局config.rbを削除してもう一回設定しなおしたら直りました。

謎です。

と思っていたら結局直らず。。

最初からサイトデータを一個ずつコピーしていきどこで問題が発生するのかチェック。

判明したこと(エビデンスは無いので勘です)

sassのコンパイル用のファイル名●●●.scssと同名のimportファイルを作成するとバグが発生する模様。

つまり
●●●.scss
に_●●●.scssというファイルをimportしてしまうとエラーになる。

何が怖いってwindowsだとエラーとして認識されずにcssファイルが更新されないだけっていう。macだと上記のcompass:command ////
になるからマシだけど。

で、注意するのが上記エラーが出たのでファイル名を変更したとしてももうダメ。config.rbと●●●.scssファイルを削除して新しく作り、koalaのサイト定義も消してやり直さないとダメっぽい。

SassでKoalaを使用しつつ、windowsとMacで併用してるんだけどMacの時だけエラーが出る時

タイトルが長すぎます。

自分の作業環境が基本Windowsなんだけども、ノートがMacなので色々と面倒なことがちょいちょいある。

そんな中、微妙に焦ったのがコレ。Windowsで作業して外出先でKoalaでコンパイルするとエラー。。
理由は良く分からず、cssの中身調べても問題なし。

そんなときは各Sassのファイルの一番上に「@charset “utf-8”;」(文字コードは人それぞれかな)を入れると解消される模様。
これコンパイルした先のCSSでいっぱい入っちゃうと思うんだけどどうなんだろ。

ーーーーーーーーーーーーーー

20160319追記

上記理由じゃなく、エラーが発生。
windowsでは動くのにMacでエラー。
エラーの文言は忘れてしまった・・・
解消法法としてはMac側のKoalaのバージョンアップのみ。

Sassをmac dreamweaverで使えるようにしたい

一個前の記事につながるが、今度はmacでsassの環境を作ろうとしてつまづいた。

・MMDocumentTypes.xml
・Extensions.txt

をファインダーで探してscssを追加〜、さてドリ起動。
あれ、scssファイルを認識していない。

finderで見つけた上記2ファイルは何度見ても更新ずみ。
グーグル先生に質問をして回答してくれたサイトがこれ。

http://k0u1.com/blog/archives/662

場合によって隠しファイルになっている場合があるらしいです。

SassでCompassのWindows -31Jエラーが出たときの対応(Ruby 2.0向けかも)

数時間悩んでシステムの友達とSkypeしながらようやくCompassがエラーを吐かなくなりました。

Sassでfont familyなどに日本語が入っているとWindowdでは
---------------------------
Encoding::UndefinedConversionError on line [“654”] of C: “\xEF\xBC” from Windows
-31J to UTF-8
---------------------------
的なエラーが出るようです。

色々なサイトを見てみると、コマンドプロンプトで
set RUBYOPT=-EUTF-8
と打てば解決といった人もいますが、自分はなぜか解決せず(知識ないせいでもある)

次に、システム環境変数のLANGを修正すればいいのだ!という記事を見つけたので試す。
システム環境変数は コンパネで環境変数と検索かければ出てきます。
で、詳細設定の「環境変数」をクリックするとユーザー用の変数を入れるところと、システムで入れるところが出ます。
ここは恐らく好みで大丈夫。
よし!LANGという変数を設定して値がja_JP.UTF-8でいける!!

と思ったがやはり無理。

そういえばどこかのサイトでRUBYOPTという変数を設定すればいけるという記事を見かけた。
んじゃLANGは削除して、RUBYOPTに「-EUTF-8」を入れて再起動(ログオフしてログインでもOKみたい)!

そしてKoalaを起動してコンパイルしてみたら・・・・
イケターーーーーーーーー!

ということでもしこんな記事が役に立ったら嬉しいですね。

 

--------------
追記です 2015/1/2

koalaをバージョンアップしたら同じ現象が再発。
今度はkoalaが参照しているディレクトリまでのパスの中に日本語が入っているとエラーが出てしまった。
簡単な回避法としてはディレクトリ名に2バイト文字を使用しないこと。