Hey I am trying to learn rails and following the rails tutorial. I am adding some elements to the apps style sheets using SCSS and this is what I am adding
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
}
but when I go to view my it in a browser I receive this error
Mixin box-sizing is missing argument $boxmodel.
(in /Users/<mynamehere>/workspace/sample_app/app/assets/stylesheets/custom.css.scss:110)
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
Rails.root: /Users/<mynamehere>/workspace/sample_app
Any help would be much appreciated. Here is a link to my github if you need to see anything else
The error says, you need a argument for box_sizing.
So try #include box-sizing(border-box);.
I made the same mistake. Check again Listing 7.2, there's some extra code there before the "/* Miscellaneous */" part, where you declare what box_sizing is:
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Make sure you're declaring the mixin after the bootstrap & bootstrap-sprockets imports (i.e. ensure you're not declaring box_sizing before #import "bootstrap"). Bootstrap sass has a built-in box_sizing mixin that will take precedence over yours otherwise.
This isn't really covered in railsguide (there's no indicator that #import bootstrap introduces a conflicting mixin), so it's definitely an easy-to-make mistake.
I had the same issue with the same error message, and neither existing solution worked for me. In my case, I'd created an scss file for mixins and variables, and was importing it before bootstrap and bootstrap-sprockets. Moving it below them fixed the problem. So in your case, make sure your general order is:
#import "bootstrap-sprockets"
#import "bootstrap";
/* either #import your-file-containing-box-sizing-mixin; or: */
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
I had the same problem, after finishing working on the custom.scss in Listing 7.2 I updated custom.scss by adding the css sidebar code of Listing 7.11 and the forms css code of Listing 7.15 on top of the Sass mixin css code of Listing 7.2. So it looked like this.
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* mixins, variables, etc. */
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box-sizing(border-box);
}
To Fix it I brought the Sass mixin css code of Listing 7.2 back to the top below the `#import "bootstrap-sprockets";
#import "bootstrap"; but to be above the the css code of Listing 7.11 and Listing 7.15. This fixed the problem for me, here is the top of the custom.scss when I finished.
#import "bootstrap-sprockets";
#import "bootstrap";
/* mixins, variables, etc. */
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box-sizing(border-box);
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
Related
I have copied a css template and appended it to my personal css file. The copied css is the following (and some more underneath):
#import url('https://fonts.googleapis.com/css?family=Pacifico');
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
#mixin size($width, $height) {
width: $width;
height: $height;
}
#mixin position($top: auto, $left: auto, $bottom: auto, $right: auto) {
position: absolute;
top: $top;
left: $left;
bottom: $bottom;
right: $right;
}
#mixin centered() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
*::before,
*::after {
content: '';
display: block;
position: absolute;
}
/*
body {
background-color: #F3F4F5;
background-image: radial-gradient(#F3F4F5 0, darken(#F3F4F5, 10%) 100%);
min-height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
font-family: 'Pacifico', cursive;
}*/
.title {
padding: 10px 20px;
span {
font-size: 20px;
font-weight: bold;
color: rgba(0,0,0,0.5);
}
}
PROBLEM: As soon as put some of the upper lines into a comment, I receive an error in
title {
padding: 10px 20px;
span { <-- error colon expected
font-size: 20px; <-- error semi-colon expected
font-weight: bold; <-- error { expedted
color: rgba(0,0,0,0.5); <-- error { expected
}
}
You see body marked as a comment above. The same happens if I start the comment in the beginning or if I only mark the section above body as a comment. If nothing is marked as a comment, no error is highlighted. (using Eclipse as IDE).
Why is this so?!
As #j08691 has already pointed out you are trying to use SCSS within a CSS file.
Since SASS is a transpiler for CSS. You may write your CSS rules inside a *.scss file so you can use both together. You will get a *.css file at the end. So you don't have to rewrite anything. All you need is a SASS compiler and rename your file to *.scss.
You can learn more about SASS (more commonly used) / or LESS here:
https://sass-lang.com
https://lesscss.org
Depending on what setup you are using there are SASS and LESS compilers out there for most common environments. You can look up dart sass for example it is a good choice for most projects.
If you just want to compile SASS to CSS you can install it with npm and then use the sass watch command.
I'm trying to create two themes for my project. I have following setup:
styles
globals
mixins
helper
themes
Now every theme has an index.scss:
#import "../../mixins/index";
#import "./colors";
#import "./breakpoints";
#import "./typography";
#import "core";
And every theme has a _core.scss:
#if import-once('core.scss') {
:global {
html, body {
background-color: $grey-page-background;
height: 100%;
}
body {
color: $grey-text-primary;
font-family: $font-family-standard;
}
body.page-body.modal-overflow-hidden {
overflow: hidden;
}
.container {
padding: 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
width: 100%;
#include breakpoint(large down) {
padding: 0 10px;
}
}
.no-margin {
margin: 0 !important;
}
.text-center {
text-align: center;
}
.green {
color: $green-smava-primary;
}
a:focus, a:hover, a:active {
color: inherit;
}
/* vb = vertical align block, for supporting browser dont support flex-box well */
.vb {
text-align: left;
}
.vb:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
/* vc = vertical align center child, for supporting browser dont support flex-box well */
.vc {
display: inline-block;
vertical-align: middle;
}
.ui.list {
list-style-type: none;
margin: 1em 0;
padding: 0;
.item {
table-layout: fixed;
list-style-type: none;
list-style-position: outside;
padding: .21428571em 0;
line-height: 1.14285714em;
}
}
.ui.list.large {
font-size: 1.14285714em;
}
}
}
As you can see -> index imports core -> and now the theme is imported to the according component (we have a versioning system for components - so this approach is good here).
So a component scss can look like this then:
#import '~styles/theme/smava/index';
.dialog {
&-input {
margin: 0 0 10px 0;
}
&-action {
border-top: 1px solid $grey-shadow-block;
float: right;
}
&-button {
&-pass {
margin-right: 30px;
}
&-login {
margin: 0;
}
}
}
Since I have multiple components core.scss gets imported multiple times.
The problem is, that I need to set a color for the body - this is the reason I have this core.scss.
So how can i deduplicate this? The approach with importing the theme has to stay the same unfortunately.
My stack:
React/Webpack/Redux/Node-sass
I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css.
I have the following files:
minifiedcssforloginpage.scss
grouped-pages.scss
In minifiedcssforloginpage.scss I declare $load-complete-css:false. Afterwards I import myproject.scss which contains all the imports of my modules, layouts, core... In myproject.scss i want to do something like
#if $load-complete-css {
#import module1;
#import module2;
#import module3;
}
So minifiedcssforloginpage.scss would generate minifiedcssforloginpage.css with less css then grouped-pages.css (that has a var $load-complete-css set to true).
But I get an error that this is not possible "Import directives may not be used within control directives or mixins".
It's one of those things that's just not allowed. The only thing you can do is turn those imports into mixins (import the file outside the #if and call the mixin where appropriate).
Clarification:
_partial.scss
#mixin partial {
.test { color: red }
// other styles here
}
styles.scss
#import "partial";
#if $someval == true {
#include partial;
}
The core dev team is reluctant to implement this feature, although they are considering the implementation of a brand new dependency system.
See the following Github issues :
Allow #import within #if (#451)
Using #import statements within control directives or mixins (#779)
Allow optional #imports (#779)
Dynamic Dependencies (#739)
Put your styles into various partial files in a way that makes sense to you. Then, you can have create a separate SASS file for your login page that imports only the files with the relevant styles.
To quote from my answer to another question:
It is currently not possible to use SASS to include files dynamically.
#import cannot be used within control directives (e.g. #if) or
mixins, using a variable in an import directive is erroneous syntax,
and there is no directive for ending file execution early (which
effectively would allow conditional imports). However, you can
solve your issue by changing how you structure your style rules.
... If you have styles that [should be] conditionally included [they]
should be encapsulated in mixins, in 'module' or 'library' files. ...
The main idea is that importing one such file will not output any
css. This way, you can import these files redundantly so you can use
the mixins wherever you need them.
There isn't currently a way to place import statements within if blocks, unfortunately.
The closest alternative I'm aware of is to use the additionalData field to add a preprocessor function to your webpack sass-loader config:
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: [...],
},
additionalData: (content: string, loaderContext)=>{
// More info on available properties: https://webpack.js.org/api/loaders
const {resourcePath, rootContext} = loaderContext;
const finalPath = someCondition ? path1 : path2;
return content.replace(/SomeDynamicPathPlaceholder/g, finalPath);
},
},
},
More info on the additionalData field here: https://webpack.js.org/loaders/sass-loader/#additionaldata
I know this is a seriously old question, but we recently implemented this in our own tiny UI framework like this:
ui-framework/config.scss
$components: (
"component-a": true,
"component-b": false
) !default;
// A bunch of other default config
ui-framework/main.scss
#import "component-a";
#import "component-b";
ui-framework/component-a.scss
#if (map-get($components, "component-a") {
.component-a {
// Bunch of code here
}
}
ui-framework/component-b.scss
#if (map-get($components, "component-b") {
.component-b {
// Bunch of code here
}
}
And then in each project:
a-project/main.scss
// NOTE: We only want component b in this project
$components: (
"component-a": false,
"component-b": true
);
#import "ui-framework/config.scss";
#import "ui-frameowrk/main.scss";
We don't do this for every single component, but the huge ones that aren't always in use (like slideshow, dialog, form related code etc).
Old question, I know; just felt I'd provide an alternative scenario and expanded example based on something I was working on.
I ran into this issue because I was hoping to use one SCSS file for smaller screens and one for larger (top menu nav on desktop and burger menu for mobiles).
Using Blazor without Bootstrap, I was wanting to use the one menu structure in terms of the actual html and then use the SCSS to switch between the two at the relevant sizes. I'd created a SCSS file for the desktop version of the nav, and started on one for the mobile version. My plan, before I was aware of this stumbling block, was to selectively import the SCSS based on a media query in a mixin (aptly named mobileOrDesktop).
My idea was to use this mixin to do all the base structure manipulation for the media sizes. Something like this:
#mixin mobileOrDesktop {
#media (min-width: 961px) {
#import 'desktopNavbar.scss';
.container-fluid {
margin-top: 70px;
height: calc(100% - calc(60px + 70px));
}
//show the footer, maybe tweak the font size, etc
}
#media (max-width:960px) {
#import 'moblieNavbar.scss';
.container-fluid {
height: 100%;
}
//hide the footer, maybe tweak font sizes, etc
}
}
Unfortunately, we can't do that due to how SCSS works. So, rather than just dumping all the CSS in the media query (I wanted to keep it relatively split up so that it was more manageable for debug/altering), I had a hunt for alternatives.
Similarly to Cinnamon, I found the most viable solution to be importing the SCSS outside of the mixin and simply including it within the mixin:
#import 'desktopNavbar.scss';
#import 'mobileNavbar.scss';
#mixin mobileOrDesktop {
#media (min-width: 961px) {
#include desktopNavbar;
.container-fluid {
margin-top: 70px;
height: calc(100% - calc(60px + 70px));
}
}
#media (max-width:960px) {
#include moblieNavbar;
.container-fluid {
height: 100%;
}
}
}
With the imported SCSS files being a mixin themselves, i.e. the desktopNavbar.scss becomes:
#import 'siteVariables.scss';
#mixin desktopNavbar {
#navbar {
.burgerIcon {
display: none;
}
.nav {
overflow: hidden;
background-color: $navy;
vertical-align: middle;
height: 70px;
line-height: 70px;
color: $blizzard;
position: fixed;
top: 0;
width: 100%;
display: block;
z-index: 99999999;
.leftBlock, .midBlock, .rightBlock {
display: inline-block;
vertical-align: middle;
height: 70px;
padding: 0px;
margin: 0px;
line-height: 70px;
}
.leftBlock {
width: 20%;
.imgLogo {
margin-left: 10px;
margin-top: 5px;
max-width: 120px;
}
}
.midBlock {
width: 60%;
text-align: center;
.navbar-nav {
display: inline-flex;
flex-wrap: nowrap;
flex-grow: 2;
flex-shrink: 2;
list-style: none;
vertical-align: middle;
margin: 0px;
padding: 0px;
.nav-item {
max-width: 175px;
color: $white;
display: inline-block;
vertical-align: middle;
height: 70px;
.btn-link {
font-size: 16px;
text-align: right;
color: $white;
padding: 14px;
line-height: 20px;
text-decoration: none;
vertical-align: middle;
span {
font-family: 'Font Awesome Solid';
line-height: 60px;
height: 60px;
vertical-align: middle;
padding: 5px;
}
}
&.dropdown {
font-size: 16px;
text-align: right;
line-height: 20px;
text-decoration: none;
vertical-align: middle;
.dropbtn {
font-size: 16px;
text-align: right;
line-height: 20px;
text-decoration: none;
vertical-align: middle;
span {
font-family: 'Font Awesome Solid';
line-height: 60px;
height: 60px;
vertical-align: middle;
padding: 5px;
}
}
.dropdown-content {
display: none;
position: fixed;
top: 68px;
text-align: center;
background-color: $star-command;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999999999;
.dropdown-header {
color: $blizzard;
}
.dropdown-item {
color: $powder;
padding: 12px 16px;
text-decoration: none;
display: block;
&:hover {
background-color: $blizzard;
color: $navy;
}
}
}
&:hover {
background-color: $star-command;
.dropdown-content {
display: block;
}
}
}
}
}
}
.rightBlock {
width: 20%;
}
}
}
}
And the site SCSS can simply be:
#import '../../FontAwesome/scss/fontawesome.scss';
#import '../../FontAwesome/scss/regular.scss';
#import '../../FontAwesome/scss/solid.scss';
#import 'siteVariables.scss';
#import 'mixins.scss';
//import other stuff here
html, body {
height: 100%;
overflow: hidden;
width: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
margin: 0px;
#include mobileOrDesktop;
.container-fluid {
overflow: auto;
main {
padding: 15px;
}
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
.dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
}
}
I have this HTML which is generated by MVC3 Razor Engine:
<div class="editor-field">
<div id="autoComplete">
#Html.EditorFor(model => Model.group_name, new { ID = "group_name" })
#Html.ValidationMessageFor(model => Model.group_name)
</div>
</div>
And my custom CSS I am writing for my autocomplete functionality:
#group_name input[type='text'], input[type='password']
{
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
#group_name input[type='text'], input[type='password'] ul
{
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
#group_name input[type='text'], input[type='password'] li
{
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/
font: menu;
font-size: 12px; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */
line-height: 16px;
overflow: hidden;
}
But it is being overrided by the site.css which comes by default with MVC 3 solution which is this:
input[type="text"], input[type="password"]
{
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
width: 200px;
}
Does anyone know what CSS I have to write to target my div and input html? Thanks.
This is because of the CSS Specificity.
You will need to make your rules more specific to override the site.css styles.
Alternatively, just override your site.css styles in the file itself. Site.css isn't like a library of styles which shouldn't be overriden. It's just a start template which you can edit/delete.
I ended up using firebug to look at the HTML as it changes. IE has its own javascript debugging options but being able to see the li render in real time and looking at its tag helped me write my css.
I already finished the tutorial but I'm having a slight issue with the CSS rendering since section 7 where you make the signup form. This is what I'm getting:
And this is what it's supposed to look like:
And this is the relevant CSS:
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
height: auto;
margin-bottom: 15px;
#include box_sizing;
}
Was wondering if anyone else had the same issue?
The difference is probably with the default height of an input in Chrome vs FireFox (Hartl's browser).
The CSS declaration height:auto; lets the browser calculate the default height.
I had the same issue with Chrome, and although I don't know if it's a good solution, I got the expected results by getting rid of the #include box_sizing; comment:
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
height: auto;
margin-bottom: 15px;
// #include box_sizing;
}
Based upon the Handy Sass Mixins by Jake Bresnehan at http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins and the section on Box Sizing, I was able to change the mixin block and the "include" line and get things working with the following situations:
#mixin box_sizing {
-moz-box-sizing: $box-model;
-webkit-box-sizing: $box-model;
box-sizing: $box-model;
}
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing(border-box);
}
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing(border-box);
}
input {
height: auto !important;
}
which is also referencing the Michael Hartl, Ruby on Rails Tutorial, Ch. 7 at http://ruby.railstutorial.org/chapters/sign-up#top