I am experimenting with SASS and am trying to load a simple sytlesheet using scss in my sinatra application.
The route handler in main.rb is
get('/styles.css'){ scss :styles }
In the layout (using the slim view renderer), I am using the css file as:
link rel="stylesheet" href="/styles.css"
I've removed the stylesheet from public folder and created the styles.scss inside the views folder, but am unable to get the css file in the rendered page.
Solved the problem.
The main problem was that I had an error in the sass file which caused it to fail silently.
on searching for the generated css file at http://localhost:4567/styles.css, the error was reported. On a hover option, &:hover {
background: darken($background, 20%);
I had a $ in place of the '&' symbol.
Related
Rails 7. New App with Bootstrap CSS, JS Bundling, and CSS Bundling. This results in structure of:
app/assets/builds,
app/images/foo.jpg,
app/assets/stylesheets/application.bootstrap.scss
and using Yarn to add Bootstrap to package.json, with ESBuild for JS build and Sass for CSS build.
It all works until I try add a simple CSS class to the application.bootstrap.scss sass file:
.bg {
background-image: url("foo.com");
}
What I really want here, is the asset in app/assets/images/foo.jpg to be referenced properly. It is a scss file, so sass. When I use the sass commands:
background-image: image-url("foo.com");
or
background-image: url(image-path("foo.com"));
nothing works in development, or production, so that my application.css build file is correct. I get errors about syntax ending in a "we found a .jpg but should be (1px 0 solid) or something like that. In other words, the sass compile is not making a valid css build.
What am I supposed to be doing here to make a simple class with an image asset be part of my delivered application.css bundle? Should I be creating a separate css file and adding that to the sprockets manifest? Seems like overkill.
At the moment the only thing that worked was just adding an inline style to my ERB layout, which is totally bogus bad, but all I could do to just move on.
As an extra question, which I know I should not ask here, I also want to reference an image I add to the Rails App, so that https://myapp.com/my-image.png is just available. I used to park this in /public/my-image.png but if I wanted to instead use /app/assets/images/my-image.jpg what would my link be? I guess it would be all fingerprinted and not accessible, but perhaps I am wrong. Is there any point to referencing an asset instead of parking it in /public or am I forced to use /public?
see
https://github.com/rails/cssbundling-rails/issues/102
did you try
.test {
background-image: url("foo.jpg");
}
https://github.com/rails/sprockets-rails#initializer-options
config.assets.resolve_assets_in_css_urls
When this option is enabled, sprockets-rails will register a CSS postprocessor to resolve assets referenced in url() function calls and replace them with the digested paths. Defaults to true.
edit:
there is below code bottom of style.css:
/*# sourceMappingURL=style.css.map */
also there is a style.css map file.I added its code:
https://www.codepile.net/pile/azGno8Qb
I dont know anything about sass.I have a html file which made sass.I want to change its styles.However when I click the element on chrome, below link seems instead of css file on developer window:
/sass/project-sass/_header.scss : HTTP status code: 404
So, which css file is refered by _header.scss?
I need to change the element.
Also I included all css files but when I include a code snippet from this html file to wordpress, necessary properties doesnt load also there is no _header.scss on chrome developer window.
How can I include the sass stuff on wordpress?
It's difficult to answer your question because you don't provide the architecture of your document and code. However :
_header.scss seems to refer to a "sub" style and it could be look like in the main style :
#import url("_header.scss");
But you can't put a scss file in HTML. You must compile it before and it will result a CSS file for example :
sass _header.scss header.css
and in your HTML :
<link rel="stylesheet" href="path/to/your/header.css">
I've started Vim (v8) and have proper syntax highlighters in place for css3. I am using postcss plugin called precss to provide for "SASS" like syntax in my code.
However, when I used a nested selector with "&:last-child" or &:first-child, the syntax throws an error. It doesn't break the code or anything, but that "red" error is so distracting for me. Check the screen shot below.
Anyone can figure out how to make this error go?? I use a plugin called vim-css3-syntax and it includes scss syntax highlighting.
Edit: Got it fixed by downloading https://github.com/cakebaker/scss-syntax.vim and then adding au BufRead,BufNewFile *.css set filetype=scss.css
Thanks in advance.
The fact that you are using SCSS syntax (nested blocks, &, etc.) in CSS makes your CSS invalid.
If you want to avoid syntax errors you have two paths:
stop using SCSS syntax in your CSS files,
make sure your file is recognized as what it is: SCSS.
I would consider the first path to be the most sensible. After all who writes JavaScript in a *.rb file or SCSS in a *.css file? But if you choose the second you can simply do:
setf scss
--- edit ---
Suppose we have this code:
body {
background-color: white;
}
It's both valid CSS and valid SCSS because SCSS is a superset of CSS. Any valid CSS is automatically valid SCSS. Vim will happily display it without any error, no matter what file extension (*.css, *.scss) and filetype (css, scss).
Now, suppose we have this code:
body {
h1 {
background-color: $brand-1;
}
}
It's valid SCSS but not valid CSS. If you write that code in a *.css file with the css filetype, you get errors because it's not CSS. If you write that code in a *.scss file with the scss filetype you don't get errors because it's valid SCSS.
This is a pretty basic question but I can't figure out why I can't change the css from the tabs template in Meteor. https://github.com/meteortemplates/tabs
I've installed the template and I am trying to change the css from the "active" tab. When I do inspect element, I'm seeing that the css file it's using is a "template_tabs.css" instead of the one I have in my root directory. I have no idea where this file is. I did a search in all my directories and can't find it.
Shouldn't my main css file in the root directory override this? If not, how do I edit this template_tabs.css file?
It likely had to do with file load order: http://docs.meteor.com/#/full/structuringyourapp You want your custom CSS files to load after the package CSS files have loaded.
Alternatively, you could mark your CSS with !important e.g.
div.sample {
background: none;
width: 200px !important }
In this example width will be set to 200px no matter when the file loads. I am not quite sure how it deals with conflicts if the style was marked !important in multiple files with different values.
I think it would be best not to mess with the original package CSS as that will be overwritten when it updates.
I have a top docked toolbar, and I used firebug to inspect the element to find the css class, which was:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
}
I changed this to:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
background-color: transparent !important;
}
Now I see the toolbar as transparent in Firefox, but in chrome it still has the default background color (blue). Why does this happen? Maybe I don't need to use this technique here, but there are definitely instances where I need to find a very specific css class using firebug. Any help or information?
Note: I tried using the Cls attribute of the toolbar with the same result.
In Chrome the background image (it's a gradient) works meanwhile in Firefox it is ignored.
So all you have to do is set the background-image and the background-color of .x-toolbar-dark like this:
.x-toolbar-dark{
background-image: none;
background-color: transparent;
}
http://jsfiddle.net/awHkT/1/
Sencha is for webkit browser, so it's CSS is made for webkit browsers like Chrome or Safari. So this kind or problem must be because there's a CSS rule with a -webkit prefix that is hence only applied on webkit browsers and ignored in firefox.
But anyway, toolbars have a gradient background, so if you want to override it you will need to do like so :
background-image: none;
background-color: transparent;
Two last thing
It's bad practice to override Sencha's CSS. Use the the cls config on you toolbar to assign it a CSS class and then use this class to style your toolbar.
Don't test you app with Firefox, but with Chrome of Safari.
Hope this helps
Can you creating a custom theme installing SASS and Compass. The instructions for installing SASS and Compass vary slightly for Mac and Windows users. Mac users will need to open the Terminal application and type the following:
i. sudo gem install haml
ii. sudo gem install compass
You will need to authenticate with your username and password to complete the install.
Windows users need to open the command line and type the following:
i. gem install haml
ii. gem install compass
Installing Ruby
Mac users get a break, since Ruby is already installed on OSX by default. Windows users should download the Ruby installer from rubyinstaller.org.
Once the installation is complete, we are ready to set up our folders and begin using SASS and Compass.
Creating your custom theme
The next thing you need to do is create your own theme SCSS file. Locate the sencha-touch.scss file in ../lib/resources/sass, and make a copy of the file. Rename the new copy of the file to myTheme.scss.
Now, you need to tell the index to look for your new theme. Using your previous example files, open your index.html file, and locate the line that says the following:
<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">
Change the sencha-touch.css stylesheet reference in your index.html file to point to myTheme.css:
<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">
SCSS and CSS
Notice that you are currently including a stylesheet from the css folder, called sencha-touch.css, and you have a matching file in the scss folder, called sencha-touch.scss. When the SCSS files are compiled, it creates a new file in your css folder. This new file will have a suffix of .css instead of .scss.
.scss is the file extension for SASS files. SCSS is short for Sassy CSS.
Now that you have your paths set up, let's take a look at the theme file copy we made. Open your myTheme.scss file. You should see the following:
#import 'sencha-touch/default/all';
#includesencha-panel;
#includesencha-buttons;
#includesencha-sheet;
#includesencha-picker;
#includesencha-tabs;
#includesencha-toolbar;
#includesencha-toolbar-forms;
#includesencha-carousel;
#includesencha-indexbar;
#includesencha-list;
#includesencha-list-paging;
#includesencha-list-pullrefresh;
#includesencha-layout;
#includesencha-form;
#includesencha-msgbox;
#includesencha-loading-spinner;
This code grabs all of the default Sencha Touch theme files and compiles them into a new CSS file located in the css folder. If you open up the sencha-touch.css file in the ../lib/resources/css folder, you will see the compressed CSS file you were previously using. This file is pretty huge, but it's all created from the basic commands.
The best part is that you can now change the entire color scheme of the application with a single line of code.
Base color
One of the key variables in the Sencha Touch theme is $base_color. This colour and its variations are used throughout the entire theme. To see what we mean, you change the colour of your theme adding the following to the top of your myTheme.scss file (above all the other text):
$base_color: #d1d3d4; //for example, color gray
Next, you need to re-compile the SASS file to create your stylesheet. From the command line, you need to change into the sass folder where your myTheme.scss file lives. Once you are in the folder, type the following into the command line and hit Enter:
compass compile
And have fun :), this will update your myTheme.css file with the new $base_color value. Reload the page in Safari or FF or anywhere, and you should see a new gray look to your application.
And look at this in http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
I hope this helps. :)