I've spent days trying to get enquire.js to work for me; maybe what I'm trying to get enquire.js to do isn't possible.
I'm trying to load 3 external js source files depending on the media query width. I've uploaded enquire.js v2.1.2, and added it to the head and have verified that it is loading. What I'm wanting it to is this:
<script>
enquire.register("screen and (max-width: 599px)", {
match : function() {
loadJS('http://www.externalwebsite.xxx/propgallery/slider/52662?rows=2&columns=1&auto=false');
}
});
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
loadJS('http://www.externalwebsite.xxx/propgallery/slider/52662?rows=2&columns=2&auto=false');
}
});
enquire.register("screen and (min-width: 900px)", {
match : function() {
loadJS('http://www.externalwebsite.xxx/propgallery/slider/52662?rows=2&columns=3&auto=false');
}
});
</script>
Is it possible to achieve this using enquire.js? Should I be putting a declaration in the besides calling the enquire.js?
Related
I am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?
Connect the font to the project (as you usually do) and just add your font to tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
'serif': ['Georgia', 'Cambria', ...],
'mono': ['SFMono-Regular', 'Menlo', ...],
'your-font': ['Your Font', ...]
}
}
}
https://tailwindcss.com/docs/font-family/#app
tailwind.config.js :
theme: {
extend: {
fontFamily: {
body: ['Rowdies']
}
}
},
css\app.css
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300&display=swap');
shell:
npm run dev
or
npm run watch
now you can use .font-body class in any tag that you want
for example:
<body class="font-body">
<h1>Hello World!</h1>
</body>
font + body = font-body
fontFamily: {
body: ['Open Sans']
}
(you can change body)
I have this:
.a-btn {
//rules here
##{&}__label {
//more rules
}
}
so I am after such an output:
.a-btn {…}
#a-btn__label {…}
BUT That compiles to this error:
SassError: Invalid CSS after "#": expected selector, was "#.a-btn"
So I need to convert .a.btn to a-btn. Therefore I have tried to use str-slice like that:
.a-btn {
//rules here
##{str-slice(&, 2)}__label {
//more rules
}
}
But that yields:
SassError: argument `$string` of `str-slice($string, $start-at, $end-at:-1)` must be a string
Can you try this
.a-btn
#at-root ##{str-slice(#{&},2)}__label
height: 200px
width: 200px
background: red
In my angular app, i am adding a class name to body like:
ngOnInit() {
this.store.updatePageClass('page-quoteCart');
}
on the page.css I am writing a class like:
#media only screen and (min-width: 320px) and (max-width: 620px) {
.page-quoteCart{
border:2px solid red; //but not added
}
}
But not getting the output. If I write the same in style.css in assets folder that works. what is the issue here?
how to write the css according to the page?
Please add the encapsulation: ViewEncapsulation.None in your html.
It will solve your issue.
for example after you update your encapsulation: ViewEncapsulation.None - your component file will look like this:
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'xxxxx',
templateUrl: 'xxxxx.html',
styleUrls: ['xxxx.scss'],
encapsulation: ViewEncapsulation.None
})
file a.scss:
$myVariable:#ffffff;
file b.scss:
#import './a.scss';
//does not work
:root{
--root-variable:$myVariable;
}
//works
.myClass{
color:$myVariable;
}
The editor sees the value of myVariable in the b.scss file. But after compiling on the page, if you look at the properties, it looks like this:
--root-variable:$myVariable
but expected:
--root-variable:#ffffff
webpack:
{
test: /\.vue$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}
}
How to fix it?
//UPDATE
I changed the question because I found the problem, but I still do not know how to solve it
For anyone coming across this now, it was due to a change in Sass 3.5, which is explained here.
Using Sass variables when defining custom CSS variables now needs to be done slightly differently. This used to work:
:root {
--root-variable: $myVariable;
}
But now you should now do this:
:root {
--root-variable: #{$myVariable};
}
I'm creating some icon font rules for using in my site. Using Sass I wanted to list all the icons in a list variable and use #each to loop through them all.
Code looks like this:
$icons:
wifi 600,
wifi-hotspot 601,
weather 602;
#each $icon in $icons {
.icon-#{nth($icon, 1)},
%icon-#{nth($icon, 1)} {
content: "\#{nth($icon, 2)}";
}
}
The problem is the backslash on the content: line. I need it for the character encoding, but it escapes the variable interpolation, outputting CSS that looks like this:
.icon-wifi {
content: "\#{nth($icon, 2)}";
}
Adding one more backslash like this: content: "\\#{nth($icon, 2)}"; outputs this CSS:
.icon-wifi {
content: "\\600";
}
Is there a way to get the Sass to output CSS with only a single backslash while keeping the variable interpolation?
I got this to work by messing with the interpolation
sassmesiter demo
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$icons:
wifi 600,
wifi-hotspot 601,
weather 602;
#each $icon in $icons {
.icon-#{nth($icon, 1)},
%icon-#{nth($icon, 1)} {
content: #{'"\\' + nth($icon, 2) + '"'}; // <------ See this line
}
}
compiles to
.icon-wifi {
content: "\600";
}
.icon-wifi-hotspot {
content: "\601";
}
.icon-weather {
content: "\602";
}
If you include the backslash in the actual variable, then when the sass generates the css, it will actually generate the calculated unicode character instead of outputting the unicode in the css output. This still usually works but it's hard to debug if something is going wrong and it is a bit more prone to cause issues in the browser in rendering the icon.
To output the actual unicode in the generated CSS, you can do this:
#function icon($character){
#return unquote('\"') + unquote(str-insert($character,'\\', 1)) + unquote('\"');
}
$icon-thing: "e60f";
.icon-thing:before {
content: icon($icon-thing); //outputs content: "\e60f";
}
You can add the backslash to the parameter in the $icons variable. That is,
$icons: wifi "\600", wifi-hotspot "\601", weather "\602";
#each $icon in $icons {
.icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
content: "#{nth($icon, 2)}";
}
}
Generated CSS:
.icon-wifi {
content: "\600";
}
.icon-wifi-hotspot {
content: "\601";
}
.icon-weather {
content: "\602";
}
Use unquote and double slash
$var:123 → content:"\e123"
content:#{unquote('\"')+("\\")+("e")+$var+unquote('\"')};
If you are using Gulp to compile your Sass files, installing this Gulp plugin is probably the easiest way to get around the issue:
https://www.npmjs.com/package/gulp-sass-unicode
var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');
gulp.task('sass', function(){
gulp.src('style.scss')
.pipe(sass())
.pipe(sassUnicode()) // <-- This is the bit that does the magic
.pipe(gulp.dest( "css/" ));
});
There is no need to make any code alterations in your Sass files. Write out your Sass code how you want and the unicode characters are decoded back into regular escaped strings in the output CSS automatically.
Input SCSS
$testContent: "\f26e";
#test {
content: $testContent;
}
Output CSS
#test {
content: "\f26e";
}
Unfortunately, these solutions were not entirely working for me but I was finally able to get it working with SASS maps
//node-sass 4.11.0
//libsass 3.5.4
$hexes: (
checkmark: \2714
);
#function out-content($var) {
#return unquote("\"#{ $var }\"");
}
#each $mod, $code in $hexes {
.#{$mod}-after {
&:after {
content: out-content($code);
}
}
}
//output
//.checkmark-after:after {
//content: "\2714";
//}