【Rails】SCSSで定義したプロパティが別ファイルで上書きされてしまう

Question

Ruby on Railsを先週から触り始め、現在簡単な
アプリケーションを作成しています。

その中で、下記のようにVCを生成しました。

Controller1: HomeController.rb
View1: Home.html.rb
SCSS1: Home.scss

Controller2: SignupController.rb
View2: Signup.html.rb
SCSS2: Signup.scss

その上で、「Home.html.rb」と「Singnup.html.rb」それぞれの中で
共通の「.btn」というclassをつけており、「Home.scss」と「Signup.scss」の中で「.btn」クラスに対して、下記のような別々のスタイルを適用しています

/** Signup.scss内 **/
.btn{
	cursor: pointer;
	background-color: rgba(20, 20, 20, 1.0);
	display: block;
	width: 40%;
	height: 45px;
	margin: 0 auto;
	border:  1px solid white;
	transition:  all 0.3s
}

/** home.scss内 **/
.btn{
	border: 1px solid white;
	border-radius: 3px;
	padding: 8px 20px 8px 20px;
	font-size: 13px;
	font-family: 'Open Sans', 'Lato', 'Roboto';
	font-weight: 100;
	color: white;
	text-decoration: none;
}

しかし、実際にブラウザ上で確認した所
home.scssに定義したスタイルがhome.html.rb内の「.btn」classに適応されておらず、代わりにsignup.scss内で定義した上記のプロパティが適用(上書き)されてしまっています。

異なるファイルで同じclass名を使用していても、異なるプロパティを適用させたいのですが、どのようにすればよろしいでしょうか？

Answer 1

view別にcssを分けていて、同じclass名で異なるスタイルをあてているのであれば、
viewごとに読み込むcssを変えれば良いと思います。

両方読み込んでおいてどちらかを優先させたいということであれば、優先したい方を後に記述するようにしてください。
基本的に同一のセレクタの場合は後から書かれたものが優先されます。
セレクタには詳細度というものがあり、複数のセレクタを指定している場合には詳細度によって優先順位が決まります。

ファイル名を見た限り、その設計自体があまり良くない気はしますね。

Comments

[Kesth]

ありがとうございます、アドバイス頂いた方法でできました。
設計については、まだまだ勉強中なのでこれからしっかり作りこんでいきたいと思います。ありがとうございました！