I have two .scss documents with the following sample code:
tables.scss:
#mixin ftable {
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
}
page.scss:
#projects-listing {
#include ftable;
}
They are required in this order from application.scss:
*= require ./tables
*= require_tree ./partials
where the partials directory contains my page.scss file.
When I load the page, i'm getting an undefined mixin ftable exception.
If you want to use Sass mixins (including compass) you need to use the sass #import function rather than the manifest style require function.
Try this instead in application.css.scss:
#import 'tables'
#import 'page'
#import 'any other files you have'
Order is important - those files with mixins need to be imported first before the files which would use the mixin.
Related
I'm having an issue in that inside my controllers scss file, I continually have to mark everything with !important in order to style elements. Here's an example input element in my Map controllers scss:
.search-field {
width: 300px !important;
box-shadow: none !important;
border-bottom: none !important;
display: inline-block;
font-size: 16px;
margin-left: 15px !important;
}
This is because inside application.scss, I imported my material library which takes precedence over map.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "materialize";
#import "font-awesome";
* {
font-family: 'Raleway', sans-serif;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
min-width: 100%;
min-height: 100%;
background-color: #1A1A1A;
}
How can I avoid having to use the !important flag everywhere?
EDIT:
I have also tried the following (with no luck)
inside application.html.erb I added an additional link to my controllers css
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'map', media: 'all', 'data-turbolinks-track': 'reload' %>
then removed the use of require_tree . inside application.scss
When I restarted the server however, I still needed the !important tags. Still no luck
Since it's very rare to need every stylesheet in your application to be loaded on every page, you'll find importing only what's necessary per page to be much more efficient, shorten load times, and also address the problem of which styles take precedence! The Rails way to do this is to remove the require tree statements in your /application.js and /application.scss files. The only files imported in your application.js & application.scss files should be app-wide styles or js. Then you would add the following lines to your layouts/application.html.erb file:
Inside the <head> tag:
<%= stylesheet_link_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.css"]
This will then include the corresponding controller's stylesheets. Putting this before or after the stylesheet_link_tag for your application changes the precedence based upon your needs.
Then in your <body> tag you should add:
<%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"]
Now, to make this work in production for deploying your app you'll need to add the controller names to your config/initializers/assets.rb file or else you'll get an error that the assets weren't compiled. In that file you'll add as follows for your map controller:
Rails.application.config.assets.precompile += %w( maps.js )
Rails.application.config.assets.precompile += %w( maps.css) #Note rails expects the css suffix and not the scss suffix here so use that and not scss even though your file may be maps.scss
Then everytime you add a new controller in the future, add that controller's name to the arrays shown above and then run bundle exec rake assets:precompile RAILS_ENV=production and you're good to go. For more examples checkout my old answer on basically the same problem here: sprockets loads sass in random order with twitter bootstrap
My problem was a combination of lower priority css rules added onto the asset pipeline loading order. I found my problem was solver when I did the following to my application.scss file:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require font-awesome
*= require materialize
*= require_tree .
*/
* {
font-family: 'Raleway', sans-serif;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
min-width: 100%;
min-height: 100%;
background-color: #1A1A1A;
}
I could remove most !important rules afterwards, and found that I was using a class css rule but it was being overrode by a specific input[type=text] rule, using an ID instead let me make the changes I wanted to.
I'm having an issue with deploying a customized _variables.scss to my production server as a compiled asset.
Everything is fine on my development environment, it's in production that my variables are being overwritten.
I'm using Rails 4.2.1 with Spree 3.0 Stable branch.
I have the following structure:
Files created in vendor/assets/stylesheets/frontend
_variables.scss (my custom app variables)
all.css (generated by Spree)
frontend_bootstrap.css.scss (override Spree)
navbar.scss (my customization)
The _variables.scss contains the following:
// Place all Sass variables here.
// Colors
$brand-primary: green;
$gray: #aaa;
// Navbar
$navbar-default-bg: #fff;
$navbar-height: 100px;
$navbar-border-radius: 0;
$navbar-default-border: none;
$navbar-default-toggle-hover-bg: $navbar-default-bg;
$navbar-default-toggle-icon-bar-bg: lighten($gray, 60%);
$navbar-default-toggle-border-color: $navbar-default-bg;
$navbar-default-link-active-bg: $brand-primary;
The frontend_boostrap.css.scss contains the following:
// Spree Bootstrap Override
// Core
#import "variables";
#import "bootstrap-sprockets";
#import "bootstrap";
// Custom Overrides
#import "navbar";
The navbar.scss contains the following:
// Navbar Customization
.navbar-myapp {
margin-bottom: 40px;
border-top: none;
border-bottom: 1px solid $navbar-default-toggle-icon-bar-bg;
.navbar-brand {
padding: 15px;
}
}
The Rails standard app/assets/stylesheets/application.css manifest isn't being used/I haven't declared anything specfic in there.
The produced HTML head code shows all.css and frontend.
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap.self-88eb7ced3e4d78d298a33264c3cfc65af6cef8ac32ae56a7dd7a3e321ba97378.css?body=1">
All is well in development but when I deploy this to my test server, some of the variables are being overwritten by the default, this includes the navbar configuration and a color.
I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass is imported.
Any suggestion on how I can go about using _variables.scss without it being overwritten? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file.
It looks like I've solved the issue.
The Bootstrap Sass gem states:
Do not use //= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins or variables.
To get this working in Production / compiled assets. I had to:
Change all.css to all.scss
Change the //= require statements to #import
The vendor/assets/stylesheets/spree/frontend/all.scss:
// Sass Application Manifest
#import "frontend_bootstrap";
The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:
// Spree Bootstrap Override
// Core
#import "bootstrap-sprockets";
#import "variables";
#import "bootstrap";
I hope this helps anyone who stumbled like I did.
I am running with an Issue while integrating this gem, In THIS url there is a section that says:
iCheck includes several skins, most of them with multiple color schemes. Include them like this:
#import 'icheck/square/blue'
#import 'icheck/square/green'
I tried to add above line in end of app/assets/stylesheets/application.css but the style are not effecting. Behind the scene Javascript is working fine and it rendering below given HTML:
<div class="icheckbox_square-blue" style="position: relative;">
<input type="checkbox" data-color="blue" data-skin="square" class="icheck-me" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins>
</div>
To make iCheck gem work in Rails 4 follow every thing that's mentioned in THIS URL but do the below changes that I did to run it successfully:
Don't import in your stylesheet the way iCheck Gem doc say:
#import 'icheck/square/blue'
#import 'icheck/square/green'
In your application.css - add it this way:
*= require icheck/square/blue
*= require icheck/square/green
I have my own custom font which I use for the website, and I would like it to be declared as the $baseFontFamily the only problem is that since it's a custom font, I want older browsers to fall back to the default twitter bootstrap font family. Is there any way I can do that?
My main .scss file looks like that:
#font-face
{
font-family: Bartley;
src: url('/Bartley.ttf');
}
$baseFontFamily: Bartley, $sansFontFamily;
#import "bootstrap";
body {
padding-top: 60px;
}
#import "bootstrap-responsive";
Thanks!
There is no "default bootstrap font" but it should work like this:
$baseFontFamily: 'Bartley', Helvetica, Arial, sans-serif !default;
and then you could do ...
$sansFontFamily: $baseFontFamily; // Set "SansFontFamily" with value from "baseFontFamily"
In my application.css file I am encountering errors when I have my code inputted below. The h1.title code will execute but the h1 code will not. It may be worth mentioning that in my application the h1.title is above the h1. However, I can get it to work if I insert the h1 code directly after the h1.title code (Repeating myself with the h1 snippet). I don't want to do this as I would like to keep my code DRY. This seems trivial but I have wrestled quite a bit with it and made no progress.
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
width: 98.5%;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
If you add the code directly in application.css, it will appear at the top of the compiled file (I assume your css files are compiled into one). My guess is that other css files included in your application.css overwrite h1 css atrributes.
Use inspect option in your browser (IE, Firefox, Chrome etc. have one built in nowadays) and see where the h1 gets it's attribute values from.