I tried to use breakpoint to replace a media query in _responsive.scss (see line 155) of a subtheme of the Zen 7.5.4 Drupal base theme:
// #media all and (min-width: 960px)
#include breakpoint($desktop)
{
$zen-column-count: 5;
…
Before that I installed breakpoint, required in config.rb, included and defined my breakpoints in _init.scss.
// Breakpoints
$breakpoint-no-query-fallbacks: true;
$small: 480px, 'no-query' '.lt-ie9';
$desktop: 960px, 'no-query' '.lt-ie9';
A simpler task works flawlessly (so the system works) however the mentioned code creates the following error:
error styles.scss (Line 118 of _breakpoint.scss: Base-level rules cannot contain the parent-selector-referencing character '&'.)
I tried to find the '&' in the code of zen-grids, but I did not find it. What do I wrong?
As Thamas said, Breakpoint's no-query fallback is meant to be used from within a selector; the fallbacks get prepended to the selector string with a space, so they cannot be used outside of a selector.
This is what's going on:
Sass with Breakpoint:
$small: 480px, 'no-query' '.lt-ie9';
.foo {
content: 'bar';
#include breakpoint($small) {
content: 'baz';
}
}
Plain Sass:
.foo {
content: 'bar';
#media (min-width: 480px) {
content: 'baz';
}
.lt-ie9 & {
content: 'baz';
}
}
It is important to note that Breakpoint does not create a separated global context, so the code you've provided that sets $zen-column-count inside of your Breakpoint include will not restrict that to that breakpoint.
The recommended workflow for working with media queries, and the workflow Breakpoint was built for, was not one where all media queries of one type are grouped together, but rather one where media queries are used in-line to adjust individual elements as they are needed. This goes hand-in-hand with the recommendation that you do not use device based media queriers, but rather media queries that are content based; i.e. media queries chosen because the current component no longer looks good and needs to be adjusted.
"What do I wrong?"
I did not read. The error message says that the problem is in _breakpoint.scss which belongs to Breakpoint and not to Zen.
And it is not a bug, it is "by desing". Breakpoint is a mixin which is designed to be included in a selector, so it is meaningless to #include at the root level of an .scss file.
It worth to mention that Sass enables root level #include but it is restricted to use without any properties or parent references (breakpoint have these, that was the problem) – see: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#including_a_mixin
Related
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
I would like to use .offcanvas-sm which is assigned to an <nav> element into the Less file. The Less file looks like:
#import "../../jasny-bootstrap.less";
.test {
.offcanvas-sm;
}
Problem is that the Less processor says - class offcanvas-sm doesn't exist. Its from this "https://github.com/jasny/bootstrap/blob/master/less/offcanvas.less" Less file included in "jasny-bootstrap.less". But how can I import this code to a class?
The compiler is correct there, indeed .offcanvas-sm does not exist in the context you try to invoke it. The key word here is Scope: selectors defined in a media query can be used as a mixin only within this same media query block.
For this particular case extend will do the trick. Scope handling of the extend is somewhat orthogonal to that of mixins, so selectors defined within media query blocks are open for "extending" from an outer scope (but not in opposite):
.test {
&:extend(.offcanvas-sm all);
}
Or just:
.test:extend(.offcanvas-sm all) {
}
---
all keyword is necessary in this case since .offcanvas-sm style is actually a set of two rulesets: .offcanvas-sm and .offcanvas-sm.in
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
I am building a variable-driven LESS framework in which a child theme can override variables set in the parent theme. This framework includes responsive design, so variables have different values set for every media query. In order for the media query specific variables to take effect, the same styles that create the main layout have to also exist within the media queries. To make this as dynamic as possible, I have created layout less files that I want to import at every media query. Unfortunately, LESS only imports styles once and ignores all subsequent imports of the same file.
Here's the gist what it looks like:
style.less:
#import "variables"; // has the variables for the main layout
#import "variables-calculations"; // has all the dynamic element size calculations that change with the defined variables
#import "layouts"; // has all of the styles that incorporate the variables
#import "responsive-tablet-wide";
media-query-tablet-wide.less
#media screen and (max-width: 1199px) {
#import "variables-responsive-tablet-wide"; // has all the variables for the current breakpoint
#import "variables-calculations";
#import "layouts";
}
The resulting output for the media query? Empty:
#media screen and (max-width: 1199px) {
}
I am using LESS compiler Prepros.
How can I force LESS to compile "layouts" twice? Or 5 times, for that matter.
I should define your variables in one file and append the target / device to it to discriminate between them
so variables should define:
#var1: 15;
#var1-tablet: 30;
etc.
Main reason, see http://lesscss.org/:
When defining a variable twice, the last definition of the variable is
used, searching from the current scope upwards. This is similar to css
itself where the last property inside a definition is used to
determine the value.
I understand that using different CSS compression shouldn't really have any effect on the site outcome (except smaller file size) but my site breaks completely when I set Compass to spit out compressed CSS.
I'm not sure what it is that breaks, but I believe it's Susy that collides with some other Compass function like the sprite or base64 inline image functions.
In order to not paste too much code in this question, here are two links to demonstrate (same source, generated seconds apart)
Using output_style = :expanded in config.rb (everything works):
http://davidpaulsson.se/expanded/
Using output_style = :compressed in config.rb (layout breaks):
http://davidpaulsson.se/compressed/
I'm using Jekyll to generate the static files, and the source files are available on Github: https://github.com/davidpaulsson/davidpaulsson.se/tree/master/sass
The problem is with this piece of code (_general.scss, line 208):
#media screen and (max-width: 769px) {
-webkit-text-size-adjust:none;
}
Here you have a CSS declaration without a selector, which is invalid.
SASS should've produced an error. Maybe it failed to do so because of the #media wrapper which kinda looks like a selector.
I'm not sure what this CSS property does, try applying it to html or *:
#media screen and (max-width: 769px) {
html {
-webkit-text-size-adjust:none;
}
}