# scss Published articles for scss. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Building a Bootstrap App with Rails 7 and SCSS Files DevFeed: [Building a Bootstrap App with Rails 7 and SCSS Files]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2022-06-22T06:12:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Rails](), [Bootstrap](), [Front end](), [Web Development](), [CSS]() Tags: [app](), [bootstrap](), [front-end](), [rails](), [sass](), [scss]() ### AI overview A walkthrough of setting up a Rails 7 application with Bootstrap and SCSS files, including generating the app, adding sassc-rails, copying stylesheets, and managing import order for asset compilation. ### Source excerpt As is too often the case, I find that the initial aspect of getting a modern app (Bootstrap, Tailwind, React) initially setup to be the most frustrating aspect of Rails. Given that I like to spin up new apps pretty regularly, well, I spend a lot of time being frustrated with an old man's grumbling of: It didn't used to be this hard. No it wasn't this hard. And while I still don't really understand asset compilation, I did recently put together a new app where I pulled in SCSS files using variables from a different app and I can start to see it. This blog post walks through a Rails 7 app using .scss files. Step 1: Rails New Here's your Rails 7 new command to generate a new app with Bootstrap: rails new scss_test1 --css bootstrap Yep. That's it. Whoa!!! There are also options to use Tailwind. I found this technique in the Saeloun article linked below and I will be forever grateful; seriously - thank you. Step 2: Add the Sassc-Rails Gem I believe this Gem is needed as sassc support is officially deprecated. But I might be wrong about this; front end stuff changes with every Rails release so if I'm wrong, well, sigh. gem "sassc-rails" NOTE: Please see the last section "That Mysterious Error"; you may not want this in your Gemfile or: Step 3: Copy In Your SCSS Files If you are pulling in SCSS files then you need to copy them into your: app/assets/stylesheets directory. They can exist elsewhere but that directory is for stylesheets so differing on this point confuses me. Modify Your Include Directives This is the tricky bit and where you simply have to experiment. The thing to understand is that asset compilation is just that - compilation.If you're old school enough that you understand the analogy of your stylesheet files becoming akin to a make file with all the dark magic that entails, perhaps that helps. In your stylesheets directory there will be an initial stylesheet file, for me, it was application_bootstrap.scss and then I had copied in a number of other styleshee ## Introducing Henry for Hugo DevFeed: [Introducing Henry for Hugo]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2021-10-17T21:14:04Z Content type: article Language: en Sources: [Kaushik Gopal's Site]() Topics: [Hugo](), [Jekyll](), [Go Language](), [CSS]() Tags: [blog-post](), [go](), [hugo](), [jekyll](), [scss](), [vscode]() ### AI overview The author introduces Henry, a customizable Hugo theme recreated from an earlier Jekyll version. The article describes its Hugo-based features, including SCSS customization, responsive footnotes, image shortcodes, and a VSCode snippet. ### Source excerpt Henry is a theme I first open-sourced for Jekyll. You can read all about it here. I've now recreated Henry for Hugo. Why Hugo? ## Over the last year, I've been learning Go and my interest in Hugo piqued. Hugo -- much like Jekyll -- is a static blog engine written in Go. But it's got more features, a more active community and is blazingly fast. Features # Many of the features I wrote as custom features for Jekyll, come built-in with Hugo. But I took the opportunity to tweak these a little further. Here's how they're implemented in Hugo: Customizability ## A blog theme is only useful if it is versatile enough to reflect your unique character and touch. Henry is extremely customizable. With simple scss override files you can customize the entire look of your blog. If you look at the main style.scss file in Henry, here's how we import the different styles: // themes/henry/assets/scss/style.scss @import "theme"; @import "mixins", "code", "base"; @import "main"; You can override any of the above files and customize your blog's look. For example, to change the background color you can override the theme.scss file like so: // my-blog/assets/scss/theme.scss @import '../../themes/henry/assets/scss/theme'; // Hook to override predefined variables. $color-background: #3E4244; $color-header-index: lighten($color-background, 10%); $color-header: lighten($color-background, 60%); To see a demo of the difference compare this blog with my brother's. Both use Henry but look pretty different. FootSidenotes ## I picked this feature up from Tufte CSS1 - inspired by the legendary Edward Tufte. If you're reading this post on a wide screen you should notice the tips to the side of this post. Go ahead and hover your cursor over to see the sidenote highlighted. On narrower screens (like phones) the sidenotes show up as traditional footnotes. You can use the quick jump links to navigate back and forth. You can read more about this feature and its implementation in this separate blog post. Image ## A Gulp Workflow for Frontend Development Automation DevFeed: [A Gulp Workflow for Frontend Development Automation]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2017-08-15T22:25:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Gulp](), [frontend development](), [workflow automation](), [CSS](), [JavaScript](), [make]() Tags: [automation](), [build](), [cache](), [cool](), [css](), [debugging](), [development](), [es6](), [faster](), [frontend](), [frontend-development](), [gulp](), [helps](), [here-s](), [insights](), [javascript](), [scss](), [stuff](), [tool](), [workflow]() ### AI overview A tutorial explaining why frontend workflow automation is useful and how Gulp can assemble a website's assets. It describes tasks for processing CSS and JavaScript, including SCSS compilation, browser prefixing, source maps, dependency inclusion, combining, minification, transpilation, and uglification. ### Source excerpt Gulp is a workflow automation tool that helps you build cool stuff faster; here's how to use it for frontend development. ## Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion DevFeed: [Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion]() Original publisher: [Read original article]() Author: Stanko Published: 2016-09-08T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [Sass](), [modern web development]() Tags: [conversion](), [css](), [function](), [mixins](), [photoshop](), [pixels](), [points](), [sass](), [scss](), [tracking]() ### AI overview A tutorial on converting Photoshop font sizes from points to CSS pixels and translating Photoshop tracking into CSS letter spacing using Sass functions and mixins. It explains when to use each construct and provides example Sass and generated CSS. ### Source excerpt We've all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units. You can recalculate everything by hand and try to keep track of it. But we can use the goodies of SCSS to make that process a bit easier. Point to pixel ratio is 1pt = 1.333333px. We'll create SASS function to do conversion for us. And PhotoShop tracking works relative to the font size. One point of tracking is 1/1000 of the font size. For this one we'll create a mixin. // Converts pt to px @function pt-to-px($size-in-points){ @return #{ round($size-in-points * 1.333333) }px; } // Adds letter spacing to match photoshop tracking @mixin tracking($ps-tracking){ letter-spacing: #{ $ps-tracking / 1000 }em; } // Usage .Component { @include tracking(-5); font-size: pt-to-px(20); line-height: pt-to-px(30); } This will generate following CSS: .Component { letter-spacing: -.005em; font-size: 15px; line-height: 23px; } Note that function and mixin can do pretty much the same job. But it makes more sense to use mixins when including complete styles, and functions to return values. So conversion makes sense to be a function, as we can use it for font size, line height or anything else. Conversion of tracking to letter spacing is including a specific style, so keep it in a mixin.