This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 6 years ago.
I'm new to sass and I'm trying to import a parent theme's css in a Magento application.
I have it working to an extent but not with the result I was expecting.
In my styles.scss folder I have:
#import "../../../rwd/default/css/styles.css";
I have run the sass --watch styles.scss:styles.css in the terminal and the resulting styles.css file has:
#import url(../../../rwd/default/css/styles.css);
In the sass guide it says:
CSS has an import option that lets you split your CSS into smaller,
more maintainable portions. The only drawback is that each time you
use #import in CSS it creates another HTTP request. Sass builds on top
of the current CSS #import but instead of requiring an HTTP request,
Sass will take the file that you want to import and combine it with
the file you're importing into so you can serve a single CSS file to
the web browser.
So I was expecting SASS to import the css as plain old css rules rather than using the #import rule, so my styles.css would look something like:
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
/*
* Removes default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
That way I would have a styles.css on production which didn't use the #import rule.
I got it to work by following this article:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
#import by default looks for a Sass file to import directly, but if the is a .css file or if the filename is a url it will compile to a CSS #import rule. Both of which were the case for me.
So my solution was to copy the css file I wanted to import & rename it rwd_styles.scss & changed my scss import rule to #import "rwd_styles.scss"; and it worked as I had hoped.
Related
Is there a way to setup a CSS baseline grid (vertical rhythm) that doesn't fall apart if a heading ends up going on multiple lines?
Yes, I have a method. It takes some CSS + Markup + Utility font.
Here is a codepen of a working solution with multiple blocks, font-sizes and fonts:
https://codepen.io/shalanah/pen/RyEOEO
You can add as many characters as you'd like to the example posted and below and it will work.
Example Markup
<h1><span>Heading One</span></h1>
<p><span>Paragraph</span></p>
Example CSS
:root {
--grid: 20; /* Vertical rhythm */
}
/* 1. Include a baselined font - This font is exactly 1em tall with no metrics below the baseline */
#font-face {
font-family: "Baseline Em";
src: url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2") format("woff2"),
url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff") format("woff"),
url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* 2. Setting block elements up */
h1, p {
font-family: "Baseline Em"; /* Baselined font only needed at block level */
line-height: 1em;
}
/* 3. Ignore inline line-heights */
h1 *, p * {
line-height: 0;
}
/* 4. Leadings and margins */
h1 {
font-size: calc(var(--grid) * 4px); /* mult of grid - our leading */
margin-bottom: calc(var(--grid) * 3px);
margin-top: calc(var(--grid) * 3px);
}
p {
font-size: calc(var(--grid) * 2px); /* mult of grid - our leading */
margin-bottom: calc(var(--grid) * 1px);
}
/* 5. Inline styles, lots of freedom, don't need to be multiples of grid */
h1 > span {
font-size: 100px;
font-family: Arial; /* Any font you want */
}
p > span {
font-size: 22px;
font-family: Arial; /* Any font you want */
}
Most of the time leading isn't worth the time it takes to implement. I came up with this solution because I absolutely needed it. I wish that we had a leading property in CSS that we could use instead of line-height since line-height is a web-only invention.
I am trying to use Less as efficient as possible. Now I want to replace the color of a placeholder, which I normally in CSS would do like this:
input::-webkit-input-placeholder /* WebKit, Blink, Edge */
{
color: #000000;
}
input:-moz-placeholder /* Mozilla Firefox 4 to 18 */
{
color: #000000;
}
input::-moz-placeholder /* Mozilla Firefox 19+ */
{
color: #000000;
}
input:-ms-input-placeholder /* Internet Explorer 10-11 */
{
color: #000000;
}
Now I thought using nested selectors in Less I could use:
input{
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
&::-moz-placeholder, /* Mozilla Firefox 19+ */
&:-ms-input-placeholder /* Internet Explorer 10-11 */
{
color: #000000;
}
}
Unfortunately that does not work like I expected. When I only use one selector (without the comma's) it works fine, but that means I would still have to make four nested selectors for each prefix, which is not efficient. How can I accomplish the effect of the first CSS block in Less with the less possible lines?
Note: the full code block is more extensive, with more nested rules. Of course for this example I could just comma all the selectors with just CSS - but I want it to work in a nested Less-selector.
Disclaimer: As always I don't recommend using Less mixins for vendor prefixing stuff. They are best left to libraries like prefix-free or Auto-prefixer. This answer is just to show how similar things can be handled using Less.
Like you've already found out (and mentioned in comments), grouping of vendor prefixed selectors will not work because the User Agent will drop the entire rule when it comes across a selector that it does not understand. You can read more about it in this answer.
This is not a problem with the Less compiler. It will compile and output the code as expected.
One way to avoid writing the four selector blocks again and again would be to put the vendor prefixed selectors into a mixin which accepts a ruleset as argument and then call it wherever required. Below is a sample code for your reference.
.placeholder(#rules){ /* no need to repeat, just copy paste this once in your code */
&::-webkit-input-placeholder /* WebKit, Blink, Edge */
{
#rules();
}
&:-moz-placeholder /* Mozilla Firefox 4 to 18 */
{
#rules();
}
&::-moz-placeholder /* Mozilla Firefox 19+ */
{
#rules();
}
&:-ms-input-placeholder /* Internet Explorer 10-11 */
{
#rules();
}
}
/* call it wherever required */
input{
.placeholder({
color: red;
})
}
input.somethingelse{
.placeholder({
color: black;
padding: 4px;
})
}
This question already has answers here:
Is there anything in the CSS spec that allows a percentage property to be relative to a specific element/property?
(1 answer)
Creating CSS Global Variables : Stylesheet theme management [duplicate]
(6 answers)
Closed 8 years ago.
How would I access previously defined styles in CSS (3) to be used in my calc()? I'd like to know how because then I can use something like width: calc(80% - calc(padding / 2)), but I'm not sure how to get padding directly within CSS.
#main {
padding: 10px;
/* This is how we might do it - remember, we want our width to be 100% - 20px. */
/* See this.padding? */
width: calc(80% - calc(this.padding * 2));
/* Of course, it could be something like self.padding: */
width: calc(80% - calc(self.padding * 2));
/* Or even just (and best of all): */
width: calc(80% + calc(padding * 2));
}
/* What would be even more awesome is if we could get properties from other styles: */
#demo1 {
font-family: Monaco;
}
#demo2 {
font-family: #demo1;
}
/* Of course, we can do this if #demo2 is inside of #demo1: */
#demo1 {
font-family: Monaco;
}
#demo2 {
font-family: inherit;
}
/* But we want to do this without having it use inherit. */
Any idea how to do any of these? I don't want to use SASS, or var because it's only supported in Firefox.
I am using the ResponsableCSS (.com) grid for LESS.
It all works great, the only problem I have is that I can't amend the gutter widths so that if I have the following: -
Two divs side by side split into 2 columns using: -
header {
div {
.column(6);
}
}
The overall grid is 12 divided by 6 = 2
But I want to show the divs side by side with no gutter on the left on the first element and no gutter on the right on the second element.
This would enable me to have 2 elements side by side with a gutter in the middle, as opposed to what I have now: -
http://s13.postimg.org/xnh8sy40n/Untitled_2.png
Heres my full LESS file, any help would be appreciated, I don't think Responsable allows for this out of the box: -
/**
* Responsable Grid System
*/
/* ========================================================== */
/* = Site Variables = */
/* ========================================================== */
/* Grid options */
#gutter_width: 18px; // Your gutter width
#columns: 12; // The amount of columns you want
#max_width: 960px; // Set a maximum width of the site
// Half the gutter for borders, margin, padding etc
#gutter: #gutter_width*0.5;
/**
* Baseline
*
* Common settings for this:
*
* 100% for 16px font and 24px baseline.
*
* 75% for 12px font and 18px baseline.
*
*/
#baseline: 100%;
/* Font variables */
#body_color: #333;
#heading_color: #111;
#body_family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
#heading_family: "Open Sans Condensed", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
/* Link colors */
#link: #6bac60;
#link_hover: #78aace;
/* Select colors */
#select: #78aace;
#select_color: #fff;
/* Default Colors */
#grey_light: #ddd;
#grey_regular: #ccc;
#grey_dark: #666;
#green: #6bac60;
/* ========================================================== */
/* = Import normalize baseline and grid = */
/* ========================================================== */
#import "normalize.less";
#import "baseline.less";
#import "grid.less";
/* ========================================================== */
/* = Your custom styles go here = */
/* ========================================================== */
.wrapper {
max-width: 960px;
margin: 0 auto;
}
header {
.clearfix();
.column(12, 0);
div {
.column(6);
}
}
#media screen and (max-width: 520px){
}
When you inspect the .column mixin in the grid.less file of the Responsable-Framework you will find that each column got a padding on each side of half size the gutter-width.
Notice that the grid uses box-sizing: border-box see also Why did Bootstrap 3 switch to box-sizing: border-box?
leveraging the .column mixin you can set the second argument to 0 to remove the padding (gutter):
header {
div {
.column(6,0);
}
}
The above also removes the gutter between you div elements, to remove the gutter only on the borders of the grid you can use the following Less code:
header {
div {
.column(6);
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
Alright, so this is what I want to achieve:
.about{
/* some styling */
}
.about,.about-pg{
/* other styling */
}
Using Sass, I figured I could do
.about
/* some styling */
&,.about-pg
/* other styling */
However it compiles to:
.about{
/* some styling */
}
.about,.about .about-pg{
/* other styling */
}
Any clue why and how to solve this?
Use #extend:
.about
/* some styling */
#extend .about-pg
.about-pg
/* other styling */